@charset "UTF-8";
/* Kabelform Theme by fleiter media Gmbh: www.fleiter-media.de */
/* Colors - Kabelform Brand Colors */
/* Legacy color variables for compatibility */
/* inter-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/inter-v20-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  src: url("../fonts/inter-v20-latin-100italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/inter-v20-latin-200.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  src: url("../fonts/inter-v20-latin-200italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/inter-v20-latin-300italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v20-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/inter-v20-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/inter-v20-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v20-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/inter-v20-latin-800italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/inter-v20-latin-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* museomoderno-regular - latin */
@font-face {
  font-display: swap;
  font-family: "MuseoModerno";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/museomoderno-v29-latin-regular.woff2") format("woff2");
}
/* museomoderno-700 - latin */
@font-face {
  font-display: swap;
  font-family: "MuseoModerno";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/museomoderno-v29-latin-700.woff2") format("woff2");
}
html, body, p {
  font-family: "Inter";
}

h1, h2, h3, h4, h5 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

.max-w-8xl {
  max-width: 95rem;
}

button {
  font-family: "Inter";
  color: #e7000b;
  font-weight: 700;
}

.text-formatted h3 {
  font-size: 1.9rem;
  margin-bottom: 1rem;
  margin-top: 1.4rem;
  color: #e7000b;
}

.bg-yellow {
  background-color: #FBC531;
}

.text-brandcolor {
  color: #FBC531;
}

.bg-dark {
  background-color: #353B48;
}

.text-dark {
  color: #353B48;
}

p.text-white {
  color: #fff;
}

#cardContainer {
  z-index: 9999;
}

.views-field-field-bild img {
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
}

.views-field-title a {
  color: #e7000b;
  padding: 1rem 0;
  display: block;
}

.views-row:hover .views-field-field-bild img {
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-box-shadow: 0 3px 15px 0px #333;
          box-shadow: 0 3px 15px 0px #333;
}

.views-row:hover .views-field-title a {
  color: #333333;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

p {
  font-weight: 400;
}

.max-w-8xl {
  max-width: 95rem;
}

.region-bigteaserheadline .text-formatted p,
.region-teaser2headline .text-formatted p,
.region-teaser3headline .text-formatted p,
.region-teaser4headline .text-formatted p {
  font-weight: 700;
}

.region-box1 img,
.region-box2 img,
.region-box3 img,
.region-box4 img,
.region-box5 img,
.region-box6 img,
.region-box7 img,
.region-box8 img,
.region-box9 img,
.region-box10 img,
.region-box11 img,
.region-box12 img,
.region-box13 img {
  min-width: 80px;
  margin: 0 auto;
}

.region-box1,
.region-box2,
.region-box3,
.region-box4,
.region-box5,
.region-box6,
.region-box7,
.region-box8,
.region-box9,
.region-box10,
.region-box11,
.region-box12,
.region-box13 {
  text-align: center;
}

.region-bildcontainer1 {
  padding: 5rem;
}

.region-bildcontainer1 img {
  border-radius: 2rem;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.region-bildcontainer2 {
  padding: 5rem;
}

.region-bildcontainer2 img {
  border-radius: 2rem;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.region-bildcontainer3 {
  padding: 5rem;
}

.region-bildcontainer3 img {
  border-radius: 2rem;
  -webkit-box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.bg-yellow .text-formatted img,
.bg-gray-700 .text-formatted img {
  border-radius: 1rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.region-topnav .menu {
  margin: 0;
  margin-top: 2rem;
}

.region-topnav .menu li {
  border-bottom: 1px solid white;
}

.region-topnav .menu li a {
  display: block;
  padding: 0.325rem 0;
  font-weight: 400;
}

.text-formatted .field__label {
  font-weight: 600;
  color: #e7000b;
  font-size: 1.6rem;
  margin-top: 2rem;
}

/* Verhindert das Überlaufen der Felder */
.webform-wrapper input,
.webform-wrapper textarea,
.webform-wrapper select {
  @apply w-full max-w-full box-border rounded-lg border-red-600 py-3 px-4 bg-white focus:ring-2 focus:ring-red-600 focus:border-transparent outline-none;
}

/* Spezielles Styling für den Absende-Button passend zu deinem Branding */
.webform-wrapper .form-submit {
  @apply bg-red-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-red-700 transition-colors cursor-pointer mt-4 border-none uppercase tracking-wide;
}

/* Abstand zwischen den Formular-Elementen */
.webform-wrapper .form-item {
  @apply mb-4 flex flex-col;
}

/* Modern Utility Form Style - Clean & Transparent */
.webform-wrapper {
  background-color: transparent; /* Hintergrund entfernt */
  border: none; /* Optional: Auch den äußeren Rahmen entfernen */
  padding: 1.5rem 0; /* Padding nur oben/unten, da kein Hintergrund mehr da ist */
  -webkit-box-shadow: none;
          box-shadow: none; /* Schatten weg, da keine Card-Optik mehr */
}
@media (min-width: 768px) {
  .webform-wrapper {
    padding: 2rem 0;
  }
}

/* Die Eingabefelder im "Clean Look" */
.js-form-item input:not([type=checkbox]):not([type=radio]),
.js-form-item textarea,
.js-form-item .form-select {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  /* Hintergrund leicht abgesetzt oder komplett weiß */
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #cbd5e1; /* slate-300: Etwas dünnerer, präziserer Rahmen */
  border-radius: 0.375rem; /* 6px: Noch knackiger für den technischen Look */
  padding: 0.875rem 1rem;
  font-size: 1rem;
  color: #1e293b; /* slate-800 */
  -webkit-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  /* Fokus-Staat: Jetzt mit deinem kabelform-red */
}
.js-form-item input:not([type=checkbox]):not([type=radio]):hover,
.js-form-item textarea:hover,
.js-form-item .form-select:hover {
  border-color: #94a3b8; /* slate-400 */
}
.js-form-item input:not([type=checkbox]):not([type=radio]):focus,
.js-form-item textarea:focus,
.js-form-item .form-select:focus {
  border-color: #e7000b;
  background-color: #ffffff;
  /* Sehr dezenter Ring statt Schattenwolke */
  -webkit-box-shadow: 0 0 0 1px #e7000b;
          box-shadow: 0 0 0 1px #e7000b;
}

/* Labels - Jetzt etwas dezenter, da kein Container mehr begrenzt */
.js-form-item label {
  display: block;
  color: #475569; /* slate-600 */
  font-weight: 600;
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
}

/* Buttons - Dein gewünschter Tailwind-Stil */
.js-form-wrapper .js-form-submit,
.form-actions .button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem 1.5rem;
  min-height: 3rem;
  background-color: #e7000b;
  color: #ffffff;
  border-radius: 0.375rem; /* Passend zu den Inputs */
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
.js-form-wrapper .js-form-submit:hover,
.form-actions .button:hover {
  background-color: #be0009;
  -webkit-filter: brightness(1.1);
          filter: brightness(1.1);
}
.js-form-wrapper .js-form-submit:active,
.form-actions .button:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}
.js-form-wrapper .js-form-submit:focus,
.form-actions .button:focus {
  outline: 2px solid #e7000b;
  outline-offset: 2px;
}

/* Abstand zwischen den Feldern */
.js-form-item {
  margin-bottom: 1.5rem;
}

.progress-step.is-active .progress-marker::before {
  background-color: #e7000b;
}

.views-field-created .field-content {
  color: #e7000b;
}

footer ul.menu {
  margin-left: 0;
}

.view-fuhrpark .views-field-title a {
  display: block;
  padding: 1rem;
}

.field--name-field-anzahl-sitzplaetze .field__label,
.field--name-field-anzahl-sitzplaetze .field__item {
  display: inline;
}

.js-form-type-checkbox {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  border: 1px solid #e7000b;
  margin: 1rem 0rem;
}

.js-form-type-checkbox > input,
.js-form-type-checkbox > label {
  display: inline-block;
}

.eu-cookie-compliance-message h1, .eu-cookie-compliance-message h2, .eu-cookie-compliance-message h3, .eu-cookie-compliance-message p, .eu-cookie-compliance-message button, .eu-cookie-compliance-category label {
  color: #353B48;
}

.text-formatted a,
.text-pretty a {
  text-decoration: underline;
}

.field--name-field-call-2-action-link a,
a.cta-button {
  background: #e7000b;
  background: -webkit-gradient(linear, left top, right top, from(#e7000b), to(#c50009));
  background: linear-gradient(90deg, #e7000b 0%, #c50009 100%);
  color: white;
  font-weight: 600;
  padding: 0.525rem 1rem;
  border-radius: 2rem;
  margin: 2rem 0rem;
  display: inline-block;
}

.text-formatted ul,
.text-formatted ol {
  padding: 2rem;
  list-style-type: disclosure-closed;
  -webkit-box-shadow: 1px 10px 16px #ccc;
          box-shadow: 1px 10px 16px #ccc;
  border-radius: 1rem;
  background: #e7000b;
  background: -webkit-gradient(linear, left top, right top, from(#e7000b), to(#c50009));
  background: linear-gradient(90deg, #e7000b 0%, #c50009 100%);
  color: white;
  margin-top: 1rem;
  margin-bottom: 2rem;
}

.text-formatted ul li,
.text-formatted ol li {
  margin-left: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.text-formatted ul li a, .text-formatted ol li a {
  font-style: italic;
  font-weight: 600;
  color: white;
}

.views-field-field-icon {
  padding: 4rem 8rem 1rem 8rem;
}

footer h2 {
  margin-top: 2rem;
}

.cookiesjsr-banner.active {
  width: 80%;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  background: white;
  padding: 2rem;
  -webkit-box-shadow: 0px 5px 20px #ccc;
          box-shadow: 0px 5px 20px #ccc;
}

.cookiesjsr-btn {
  padding: 0.575rem 1rem;
  margin: 0rem 0.525rem;
  border-radius: 1rem;
  -webkit-box-shadow: 1px 1px 5px #ccc;
          box-shadow: 1px 1px 5px #ccc;
}

.cookiesjsr-btn.important.allowAll {
  background-color: #1daa72;
  color: white;
}

.cookies-docs,
#cookies-docs > .disclaimer {
  margin: 4rem 10rem;
  padding: 2rem;
  -webkit-box-shadow: 0 5px 5px #ccc;
          box-shadow: 0 5px 5px #ccc;
  border-radius: 1rem;
  border-color: #a3195b;
}

.cookiesjsr-banner--text {
  font-size: 0.75rem;
}

.cookiesjsr-links {
  color: #a3195b;
  font-size: 0.75rem;
  margin: 1rem 0;
}

.view-tutorials .views-field-title a {
  background-color: white;
  color: #a3195b;
  padding: 0.375rem 1rem;
  text-align: left;
  display: block;
  -webkit-box-shadow: 0 0px 5px #ccc;
          box-shadow: 0 0px 5px #ccc;
  border-radius: 1rem;
}

.field--name-field-empfohlene-links .field__label {
  font-family: "MuseoModerno", sans-serif;
  margin-top: 1rem;
  color: #a3195b;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.field--name-field-empfohlene-links a {
  color: #e7000b;
  margin-top: 0.575rem;
  display: block;
}

/* Kabelform Specific Styles */
.redtitle {
  background: #e7000b;
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.redtitle h1, .redtitle h2, .redtitle h3, .redtitle h4, .redtitle h5 {
  color: white;
  margin: 0;
}

.redcontainer {
  background: #e7000b;
  background: linear-gradient(135deg, #e7000b 0%, #c50009 100%);
  color: white;
  padding: 2rem;
  border-radius: 0.5rem;
}
.redcontainer h1, .redcontainer h2, .redcontainer h3, .redcontainer h4, .redcontainer h5, .redcontainer p {
  color: white;
}

.whitebox {
  background: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}
.whitebox:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
          box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.redbox {
  background: #e7000b;
  background: linear-gradient(135deg, #e7000b 0%, #c50009 100%);
  color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0 2px 10px rgba(231, 0, 11, 0.3);
          box-shadow: 0 2px 10px rgba(231, 0, 11, 0.3);
  min-height: 150px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
}
.redbox:hover {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  -webkit-box-shadow: 0 5px 20px rgba(231, 0, 11, 0.4);
          box-shadow: 0 5px 20px rgba(231, 0, 11, 0.4);
}
.redbox a {
  color: white;
  text-decoration: none;
}

.contactbox .region-phoneicon {
  color: #666666;
  font-size: 0.9rem;
}
.contactbox .region-phoneicon i {
  color: #e7000b;
  font-size: 1.2rem;
}
.contactbox .region-phoneicon a {
  color: #666666;
  text-decoration: none;
}
.contactbox .region-phoneicon a:hover {
  color: #e7000b;
}

/* Off-canvas menu styles */
.off-canvas-wrapper {
  position: relative;
}

#mobile-menu .sidebar-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#mobile-menu .sidebar-menu ul li {
  border-bottom: 1px solid #f5f5f5;
}
#mobile-menu .sidebar-menu ul li a {
  display: block;
  padding: 1rem 0;
  color: #333333;
  text-decoration: none;
}
#mobile-menu .sidebar-menu ul li a:hover {
  color: #e7000b;
}

/* Gray background sections */
.gray, .bg-gray-100 {
  background: #f5f5f5;
}

.path-produkte-leistungen .region-mainmenu ul li:nth-child(4) a {
  color: #e7000b;
}

.path-aktuelles .region-mainmenu ul li:nth-child(3) a,
.page-node-type-aktuelles .region-mainmenu ul li:nth-child(3) a {
  color: #e7000b;
}

.path-anwendungsbereiche .region-mainmenu ul li:nth-child(2) a,
.page-node-type-anwendungsbereiche .region-mainmenu ul li:nth-child(2) a {
  color: #e7000b;
}

@-webkit-keyframes mesh-float-extreme {
  0% {
    -webkit-transform: translate(0, 0) scale(1) rotate(0deg);
            transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }
  33% {
    -webkit-transform: translate(100px, -120px) scale(1.4) rotate(120deg);
            transform: translate(100px, -120px) scale(1.4) rotate(120deg);
    opacity: 0.8; /* Heller/Deutlicher */
  }
  50% {
    opacity: 0.3; /* Kurzes "Dimmen" für mehr Kontrast */
  }
  66% {
    -webkit-transform: translate(-80px, 60px) scale(0.7) rotate(240deg);
            transform: translate(-80px, 60px) scale(0.7) rotate(240deg);
    opacity: 0.9; /* Zweites Highlight */
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1) rotate(360deg);
            transform: translate(0, 0) scale(1) rotate(360deg);
    opacity: 0.5;
  }
}

@keyframes mesh-float-extreme {
  0% {
    -webkit-transform: translate(0, 0) scale(1) rotate(0deg);
            transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.5;
  }
  33% {
    -webkit-transform: translate(100px, -120px) scale(1.4) rotate(120deg);
            transform: translate(100px, -120px) scale(1.4) rotate(120deg);
    opacity: 0.8; /* Heller/Deutlicher */
  }
  50% {
    opacity: 0.3; /* Kurzes "Dimmen" für mehr Kontrast */
  }
  66% {
    -webkit-transform: translate(-80px, 60px) scale(0.7) rotate(240deg);
            transform: translate(-80px, 60px) scale(0.7) rotate(240deg);
    opacity: 0.9; /* Zweites Highlight */
  }
  100% {
    -webkit-transform: translate(0, 0) scale(1) rotate(360deg);
            transform: translate(0, 0) scale(1) rotate(360deg);
    opacity: 0.5;
  }
}
.animate-mesh-fast {
  -webkit-animation: mesh-float-extreme 6s infinite ease-in-out;
          animation: mesh-float-extreme 6s infinite ease-in-out;
  -webkit-filter: blur(60px);
          filter: blur(60px);
  will-change: transform, opacity;
  /* Mix-blend-mode "screen" oder "plus-lighter" wirkt oft sauberer 
     wenn es "heller" werden soll, "multiply" eher für dunkle Effekte. */
  mix-blend-mode: soft-light;
}

/* ========================================
   YouTube Field Module Fixes
   ======================================== */
/* The main container that has both classes */
figure.youtube-container.youtube-container--responsive {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 56.25% !important; /* 16:9 Aspect Ratio */
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
}

/* iframe inside the container */
figure.youtube-container.youtube-container--responsive iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* Alternative selector if structure changes */
figure.youtube-container iframe,
.youtube-container--responsive iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
}

/* The wrapper should not add height */
.youtube-video-wrapper {
  position: relative;
  width: 100%;
  display: block;
  /* NO height, NO padding, NO aspect-ratio */
}

/* Field container cleanup */
.youtube-video-wrapper .field--type-youtube,
.field--name-field-youtube-video {
  line-height: 0;
  font-size: 0;
  display: block;
}

.youtube-video-wrapper .field__item,
.field--name-field-youtube-video .field__item {
  line-height: 0;
  font-size: 0;
  display: block;
}

/* YouTube Cookies Module Support */
.youtube-container .youtube-cookies__thumbnail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer !important;
  display: block !important;
  z-index: 2;
}

.youtube-cookies__thumbnail__picture {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.youtube-cookies__thumbnail__picture img {
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: cover !important;
     object-fit: cover !important;
}

/* Play button */
.youtube_cookies__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  z-index: 10;
  pointer-events: none;
}

/* Hide empty iframes when cookies module is active */
.youtube-container iframe[src=""],
.youtube-container iframe:not([src]) {
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* After cookie consent */
.youtube-cookies--cookie-consent-given .youtube-cookies__thumbnail {
  display: none !important;
}

.youtube-cookies--cookie-consent-given iframe {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 3 !important;
}

/* Remove any empty divs */
.field--type-youtube > div:empty,
.field--name-field-youtube-video > div:empty {
  display: none;
}

/* Override inline styles if any */
figure.youtube-container[style*=height]:not([style*="height: 0"]) {
  height: 0 !important;
}

/* Ensure proper display even if JS adds styles */
.youtube-container--responsive[style] {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
}

/* Fix for Safari and other webkit browsers */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  figure.youtube-container.youtube-container--responsive {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}