/*
Theme Name: Pi-Theme
Theme URI: https://www.PiWebdesign.de
Author: Pi&Pi
Author URI: https://www.PiWebdesign.de
Text Domain: PiWebdesign-Theme
*/

/* ==========================================================================
Basis-Setup & Textoptimierung
========================================================================== */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: antialiased;
  text-rendering: optimizeLegibility;
  word-wrap: normal;
  font-variant-ligatures: common-ligatures;
  font-feature-settings: "liga", "lnum";
  -webkit-font-feature-settings: "liga", "lnum";
  -moz-font-feature-settings: "liga", "lnum";
  position: relative;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  height: 100%;
  margin-top: 0 !important;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body .entry-content {
  background-color: transparent !important;
}

/* ==========================================================================
Hintergrundeffekt – animierte SVG-Blasen per ::before
Liegt fix im Hintergrund und erzeugt einen soften, animierten "Wabereffekt"
========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
  filter: blur(40px);
  animation: float-bubbles 25s ease-in-out infinite alternate;

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 300px, 220px, 180px, 250px, 200px;
  background-position:
    10% 20%,   /* Blase 1 */
    70% 100%,  /* Blase 2 */
    35% 95%,   /* Blase 3 */
    50% 60%,   /* Blase 4 */
    80% 15%;   /* Blase 5 */

background-image:
    /* Blase 1 (SVG als Base64 eingebettet) */
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgZGF0YS1uYW1lPSJFYmVuZSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzMwLjI4IDMzMC4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNVbmJlbmFubnRlcl9WZXJsYXVmXzI2KTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iVW5iZW5hbm50ZXJfVmVybGF1Zl8yNiIgZGF0YS1uYW1lPSJVbmJlbmFubnRlciBWZXJsYXVmIDI2IiBjeD0iMTY1LjE0IiBjeT0iMTY1LjE0IiBmeD0iMTY1LjE0IiBmeT0iMTY1LjE0IiByPSIxNjUuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMzJiOTkyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1ODBjMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIiBkYXRhLW5hbWU9IkViZW5lIDEiPgogICAgPGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxNjUuMTQiIGN5PSIxNjUuMTQiIHI9IjE2NS4xNCIvPgogIDwvZz4KPC9zdmc+"),
    /* Blase 2 */
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgZGF0YS1uYW1lPSJFYmVuZSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzMwLjI4IDMzMC4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNVbmJlbmFubnRlcl9WZXJsYXVmXzI5KTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iVW5iZW5hbm50ZXJfVmVybGF1Zl8yOSIgZGF0YS1uYW1lPSJVbmJlbmFubnRlciBWZXJsYXVmIDI5IiBjeD0iMTY1LjE0IiBjeT0iMTY1LjE0IiBmeD0iMTY1LjE0IiBmeT0iMTY1LjE0IiByPSIxNjUuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2RlMDY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1ODBjMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIiBkYXRhLW5hbWU9IkViZW5lIDEiPgogICAgPGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxNjUuMTQiIGN5PSIxNjUuMTQiIHI9IjE2NS4xNCIvPgogIDwvZz4KPC9zdmc+"),
    /* Blase 3 */
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgZGF0YS1uYW1lPSJFYmVuZSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzMwLjI4IDMzMC4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNVbmJlbmFubnRlcl9WZXJsYXVmXzI2KTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iVW5iZW5hbm50ZXJfVmVybGF1Zl8yNiIgZGF0YS1uYW1lPSJVbmJlbmFubnRlciBWZXJsYXVmIDI2IiBjeD0iMTY1LjE0IiBjeT0iMTY1LjE0IiBmeD0iMTY1LjE0IiBmeT0iMTY1LjE0IiByPSIxNjUuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMzJiOTkyIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1ODBjMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIiBkYXRhLW5hbWU9IkViZW5lIDEiPgogICAgPGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxNjUuMTQiIGN5PSIxNjUuMTQiIHI9IjE2NS4xNCIvPgogIDwvZz4KPC9zdmc+"),
    /* Blase 4 */
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgZGF0YS1uYW1lPSJFYmVuZSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzMwLjI4IDMzMC4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNVbmJlbmFubnRlcl9WZXJsYXVmXzMwKTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iVW5iZW5hbm50ZXJfVmVybGF1Zl8zMCIgZGF0YS1uYW1lPSJVbmJlbmFubnRlciBWZXJsYXVmIDMwIiBjeD0iMTY1LjE0IiBjeT0iMTY1LjE0IiBmeD0iMTY1LjE0IiBmeT0iMTY1LjE0IiByPSIxNjUuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjN2NmMzVkIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1ODBjMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIiBkYXRhLW5hbWU9IkViZW5lIDEiPgogICAgPGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxNjUuMTQiIGN5PSIxNjUuMTQiIHI9IjE2NS4xNCIvPgogIDwvZz4KPC9zdmc+"),
    /* Blase 5 */
    url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iRWJlbmVfMiIgZGF0YS1uYW1lPSJFYmVuZSAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzMwLjI4IDMzMC4yOCI+CiAgPGRlZnM+CiAgICA8c3R5bGU+CiAgICAgIC5jbHMtMSB7CiAgICAgICAgZmlsbDogdXJsKCNVbmJlbmFubnRlcl9WZXJsYXVmXzI5KTsKICAgICAgfQogICAgPC9zdHlsZT4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iVW5iZW5hbm50ZXJfVmVybGF1Zl8yOSIgZGF0YS1uYW1lPSJVbmJlbmFubnRlciBWZXJsYXVmIDI5IiBjeD0iMTY1LjE0IiBjeT0iMTY1LjE0IiBmeD0iMTY1LjE0IiBmeT0iMTY1LjE0IiByPSIxNjUuMTQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjM2RlMDY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1ODBjMyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8ZyBpZD0iRWJlbmVfMS0yIiBkYXRhLW5hbWU9IkViZW5lIDEiPgogICAgPGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSIxNjUuMTQiIGN5PSIxNjUuMTQiIHI9IjE2NS4xNCIvPgogIDwvZz4KPC9zdmc+");
}

/* ==========================================================================
Keyframes für Blasenbewegung (Wabern)
========================================================================== */
@keyframes float-bubbles {
  0% {
    background-position: 10% 20%, 70% 100%, 35% 95%, 50% 60%, 80% 15%;
  }
  50% {
    background-position: 15% 32%, 60% 45%, 55% 95%, 30% 12%, 82% 30%;
  }
  100% {
    background-position: 10% 20%, 70% 100%, 35% 95%, 50% 60%, 80% 15%;
  }
}


/* ==========================================================================
Typografie
========================================================================== */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
  text-decoration: none !important;
}

footer a{
    text-decoration: none;
}

/* ==========================================================================
Globaler Verlauf & Farbverlauf-Stile
========================================================================== */
:root {
  --shared-gradient: linear-gradient(90deg,
    #2e3d56, #2f5668, #2e7b79, #2b8f6d, #28a551,
    #23bd24, #56d51c, #9fec18, #eef620, #ffc229);
}

.is_gradiant h1,
.is_gradiant h2,
.icon-list img,
.icon_wrapper,
.icon_before::after {
  display: inline-block;
  background-image: var(--shared-gradient);
  background-size: 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.no-gradient {
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: initial !important;
  color: inherit;
}

/* ==========================================================================
🧑Hero-Block mit Bild und Verlaufstitel
========================================================================== */
.head_picture {
  text-align: center;
  transform: rotate(15deg);
}
.head_picture img {
  width: 450px !important;
  overflow: hidden;
}

.hero_collum {
  flex-direction: column-reverse;
}
.hero_collum div:has(.is_gradiant) {
  margin-top: -150px;
  z-index: 100;
}
.hero_collum .is_gradiant h1 {
  font-size: 6rem !important;
}

/* google ads heor blocker  */

body:has(.entry-content .ads_hero) header .offcanvas-hover-area,
body:has(.entry-content .ads_hero) header .burgerbutton-button{
  display: none;
}


.hero_collum .is_gradiant h1.mobile_res_small {
  font-size: 3rem !important;
}


/* ==========================================================================
Grafische Elemente – SVG Kreise
========================================================================== */
.graphic_header {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.floating-circle {
  position: absolute;
  transition: transform 0.3s ease;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.63 93.63'><defs><linearGradient id='g' x1='0' y1='46.82' x2='93.63' y2='46.82' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%232e3c56'/><stop offset='.24' stop-color='%23337784'/><stop offset='.34' stop-color='%2332b992'/><stop offset='.55' stop-color='%233de066'/><stop offset='.66' stop-color='%237cf35d'/><stop offset='1' stop-color='%23ffc127'/></linearGradient></defs><circle cx='46.82' cy='46.82' r='45.82' fill='none' stroke='url(%23g)' stroke-width='3'/></svg>");
  background-size: cover;
  background-repeat: no-repeat;
  animation: rotateGradient 20s linear infinite;
}
.floating-circle1 {
  top: 65%; left: 70%; width: 90px; height: 90px;
}
.floating-circle2 {
  top: -10%; left: 0; width: 100px; height: 100px;
}
.floating-circle3 {
  top: -10%; left: 85%; width: 30px; height: 30px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 93.63 93.63'><defs><linearGradient id='g' x1='0' y1='46.82' x2='93.63' y2='46.82' gradientUnits='userSpaceOnUse'><stop offset='0' stop-color='%232e3c56'/><stop offset='.24' stop-color='%23337784'/><stop offset='.34' stop-color='%2332b992'/><stop offset='.55' stop-color='%233de066'/><stop offset='.66' stop-color='%237cf35d'/><stop offset='1' stop-color='%23ffc127'/></linearGradient></defs><circle cx='46.82' cy='46.82' r='45.82' fill='none' stroke='url(%23g)' stroke-width='5'/></svg>");
}

/* ==========================================================================
Buttons mit animiertem Verlaufshintergrund
========================================================================== */
.wp-block-button__link {
  position: relative;
  display: inline-block;
  padding: 0.75em 1.5em;
  font-weight: bold;
  color: white;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  z-index: 0;
  overflow: hidden;
  transition: color 0.3s ease;
}
.wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--shared-gradient);
  background-size: 200% auto;
  border-radius: inherit;
  z-index: -1;
  padding: 2px;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  transition: opacity 0.4s ease, background-position 2s linear;
  opacity: 1;
}
.wp-block-button__link:hover::before {
  background-position: 100% 50%;
  mask: none;
  -webkit-mask: none;
}

/* ==========================================================================
Trenner mit Verlauf
========================================================================== */
.wp-block-separator {
  height: 4px;
  border: none;
  background: var(--shared-gradient);
  border-radius: 0;
}

/* ==========================================================================
Animierte Boxen mit Verlaufrahmen (gradient-box)
========================================================================== */
.gradient-box {
  opacity: 0;
  transform: translateY(100px);
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
  position: relative;
  padding: 2rem;
  z-index: 1;
  border-radius: 6px;
  flex: 1;
  overflow: visible;
  width: 100%;
  margin: unset !important;
  margin-top: 5rem !important;
}
.gradient-box.in-view {
  opacity: 1;
  transform: translateY(0);
}
.gradient-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 4px;
  background-image: var(--shared-gradient);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
}
.gradient-box:nth-child(n):not(:nth-child(6))::before {
  background-position: 0% 0%;
}
.gradient-box:nth-child(6)::before {
  padding: 0;
}



.hover_white:hover{
  color: black;
  background-color: white;
}

.hover_white:hover a{
  color: black;
}


/* ==========================================================================
Icons mit Verlaufsfüllung
========================================================================== */
.icon_before {
  position: relative !important;
  display: inline-block;
  margin-top: 80px !important;
  overflow: visible;
}
.icon_before::after {
  display: inline-block;
  background-size: 400%;
  background-repeat: no-repeat;
  font-family: var(--wp--preset--font-family--fontello) !important;
  font-size: 80px;
  text-align: center;
  justify-content: center;
}
.icon_before_paint::after  { content: "\E804"; background-position: 0% 0%; }
.icon_before_desktop::after{ content: "\E803"; background-position: 25% 0%; }
.icon_before_mobile::after { content: "\E802"; background-position: 50% 0%; }
.icon_before_chart::after  { content: "\E801"; background-position: 75% 0%; }

.wp-block-group:has(.icon_before) {
  text-align: center;
}

/* ==========================================================================
Navigation
========================================================================== */
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) {
  gap: 0.5rem;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child {
  flex-wrap: wrap;
  justify-content: center;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li > a {
  padding: 1rem 1.5rem;
  font-weight: bold;
  font-size: 1.2rem;
}
.wp-block-navigation ul > li {
  cursor: pointer;
}
.wp-block-navigation ul > li:hover > a,
.wp-block-navigation ul > li.current-menu-item > a {
  font-weight: bold;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > a {
  padding: 1rem 0.5rem 1rem 1.5rem;
}
.wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child > .wp-block-navigation__submenu-icon svg path {
  stroke-width: 3;
}
.wp-block-navigation ul.wp-block-navigation__submenu-container {
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  border: none !important;
  padding: 0;
  position: relative !important;
}
.wp-block-navigation .has-child:not(.open-on-click):hover > ul.wp-block-navigation__submenu-container {
  padding: 0.5rem 3rem 1.5rem;
}
.wp-block-navigation ul.wp-block-navigation__submenu-container > li > a {
  padding: 1rem 0;
}
.wp-block-navigation ul.wp-block-navigation__submenu-container > li:last-child > a {
  border-bottom: none;
}
.wp-block-social-links,
.wp-block-social-links.has-normal-icon-size {
  font-size: 20px;
}

/* ==========================================================================
Breiten & Abstände für Gutenberg-Alignments
========================================================================== */
.alignfull {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  margin-top: 3rem;
}
.alignwide {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-cover.alignfull > .wp-block-cover__inner-container,
.wp-block-group.alignfull {
  width: 100%;
}
.entry-content > :not(.alignwide):not(.alignfull),
.wp-block-cover.alignfull > .wp-block-cover__inner-container > :not(.alignwide):not(.alignfull),
.wp-block-group.alignfull > :not(.alignwide):not(.alignfull) {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-group.alignfull.has-background,
.wp-block-cover.alignfull {
  padding: 3rem 0;
}
.alignfull + * {
  margin-top: 3rem;
}
.alignfull + .alignfull,
.alignfull + footer {
  margin-top: 0 !important;
}
.entry-content > *:last-child:not(.alignfull) {
  margin-bottom: 3rem;
}

/* ==========================================================================
Referenz-Videos (mobil & desktop)
========================================================================== */
.reference_video {
  display: flex;
  align-items: flex-start;
  height: fit-content;
}
.wp-block-video video {
  border-radius: 10px;
}
.mobile_vid_wrapper figure {
  display: block;
  max-width: 250px;
  margin-left: auto;
  margin-right: auto;
}
.desktop_vid_wrapper {
  display: none;
}

/* ==========================================================================
Formular
========================================================================== */

.wpcf7-list-item {
    margin: unset !important;
}

form.wpcf7-form input:not(.wpcf7-submit):not(input[type='checkbox']),
form.wpcf7-form textarea,
form select {
    width: 100%;
}

/* Einheitliche Höhe für Eingabefelder */
form.wpcf7-form input:not(.wpcf7-submit):not(input[type='checkbox']) {
    height: 45px;
    -webkit-appearance: none; /* Safari Standard-Styles entfernen */
    appearance: none;
    border:none;
    border-bottom: solid 1px white;
    padding: 10px;
    border-radius: 0px;
    background-color: transparent;
    color: white;
    font-style: var(--wp--preset--font-family--bebas-neue);
    font-size: 1rem;
}

/* Einheitliches Styling für Textareas */
form.wpcf7-form textarea {
    background-color: transparent;
    border:none;
    border-bottom: solid 1px white;
    padding: 10px;
    border-radius: 0px;
    min-height: 100px; /* Mindesthöhe setzen */
    resize: vertical; /* Benutzer darf die Höhe ändern */
    color: white;
    font-style: var(--wp--preset--font-family--bebas-neue);
    font-size: 1rem;
}

/* Safari-spezifische Anpassungen für Select-Felder */
form select {
    background: transparent;
    border:none;
    border-bottom: solid 1px white;
    height: 3rem;
    padding: 10px;
    -webkit-appearance: none;
    /* appearance: none; */
    border-radius: 0px;
    color: white;
    font-style: var(--wp--preset--font-family--bebas-neue);
    font-size: 1rem;
}

form select {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
  }

form input::placeholder,
form textarea::placeholder,
form select::placeholder,
form textarea{
    color: white;
    font-style: var(--wp--preset--font-family--bebas-neue);
    font-size: 1rem;
}

form label{
    /* margin-left: 10px; */
}

/* Standardisierung des Submit-Buttons */
input.wpcf7-submit {
    background-color: transparent;
    border: 2px solid White;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 1s;
    color: white;
}

input.wpcf7-submit:hover {
    background-color:White;
    transition: all 1s;
    color: black;
    border-color: White;
}


/* Sicherstellen, dass Farben in allen Browsern gleich sind */
form.wpcf7-form {
    color: white;
}

p:has(.contactform-h){
    display: none;
}


/* Safari-spezifische Fixes mit @supports */
@supports (-webkit-touch-callout: none) {
    form select {
        padding-right: 30px; /* Platz für den benutzerdefinierten Pfeil */
    }
}


.form_half_wrapper{
    display: block;
}


.wpcf7-spinner{
    display: none;
}



/* ==========================================================================
List Style
========================================================================== */

:root {
  --shared-verti-gradient: linear-gradient(
    to bottom,
    #2e3d56,
    #2f5668,
    #2e7b79,
    #2b8f6d,
    #28a551,
    #23bd24,
    #56d51c,
    #9fec18,
    #eef620,
    #ffc229
  );
  --marker-size: 18px;
}

.gradient-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.gradient-list li {
  position: relative;
  padding-left: 2em;
  margin: 1.5em 0;
}

.gradient-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: var(--marker-size);
  height: var(--marker-size);
  border-radius: 50%;
  background-image: var(--shared-verti-gradient);
  background-size: 100% calc(var(--marker-size) * 3); /* 3 Marker = 3 Farben */
  background-repeat: no-repeat;
}

.gradient-list li:nth-child(1)::before {
  background-position: 0 0;
}

.gradient-list li:nth-child(2)::before {
  background-position: 0 calc(-1 * var(--marker-size));
}

.gradient-list li:nth-child(3)::before {
  background-position: 0 calc(-2 * var(--marker-size));
}


/* ==========================================================================
Animation Ladebalken
========================================================================== */

.scroll-loader-wrap {
  position: relative;
  width: 6px !important;
  height: 100%; /* oder 100%, wenn Elternhoehe gesetzt ist */
  background: #e6e6e6;
  border-radius: 999px;
  overflow: hidden;
}

.scroll-loader-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--loader-progress, 0) * 100%);
  background: hsl(var(--loader-hue, 200) 90% 50%);
  border-radius: 999px;
  transition: height 0.05s linear, background 0.1s linear;
}




/* ==========================================================================
Media Queries – bleiben inhaltlich gleich, wurden nur intern geglättet
========================================================================== */
@media only screen and (min-width: 780px) {
  .mobile_vid_wrapper figure { display: none; }
  .desktop_vid_wrapper { display: block; }

  body {
  margin: 0;
  padding: 0;
  overflow-x: unset;
}
}

@media only screen and (min-width: 800px) {
    .form_half_wrapper{
        display: flex;
        gap: 1rem;
    }

    .form_half{
        width:50%;
    }
   
}

@media only screen and (min-width: 990px) {
  .wp-block-cover.alignfull.has-custom-content-position { padding: 8rem !important; }

  .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li.has-child {
    flex-wrap: nowrap;
    justify-content: center;
    margin-right: 1.5rem;
  }

  .wp-block-navigation ul:not(.wp-block-navigation__submenu-container) > li:last-child > a {
    padding-right: 0;
  }

  .wp-block-navigation ul.wp-block-navigation__submenu-container {
    left: -1rem !important;
    right: auto !important;
    width: auto !important;
    box-shadow: 0px 10px 30px -10px rgba(0,0,0,0.1);
    padding: 0.5rem 3rem 1.5rem;
    min-width: 250px !important;
    position: absolute !important;
  }

  .alignfull {
    margin-top: 6rem;
  }

  .wp-block-group.alignfull.has-background,
  .wp-block-cover.alignfull {
    padding: 6rem 0;
  }

  .alignfull + * {
    margin-top: 6rem;
  }

  .entry-content > *:last-child:not(.alignfull) {
    margin-bottom: 6rem;
  }

  .video_filter .swiper-slide figure {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
  }

  .video_filter .swiper-slide figure:hover {
    filter: grayscale(0%);
  }

  .gradient-box {
    margin-top: unset !important;
    margin-bottom: -5rem !important;
    width: 40%;
  }

  .gradient-box:nth-child(1) { left: 0; }
  .gradient-box:nth-child(2) { left: 60%; }
  .gradient-box:nth-child(3) { left: 10%; }
  .gradient-box:nth-child(4) { left: 55%; }
  .gradient-box:nth-child(5) { left: 8%; }
  .gradient-box:nth-child(6) {
    left: 33%;
    margin-top: 10rem !important;
  }

  .gradient-box:nth-child(1)::before { background-position: 0% 0%; }
  .gradient-box:nth-child(2)::before { background-position: 60% 0%; }
  .gradient-box:nth-child(3)::before { background-position: 10% 0%; }
  .gradient-box:nth-child(4)::before { background-position: 55% 0%; }
  .gradient-box:nth-child(5)::before { background-position: 8% 0%; }

  .gradient-box::before {
    background-size: 300% 100%;
  }
}

@media only screen and (min-width: 1100px) {
  .hero_collum { flex-direction: unset; }
  .hero_collum div:has(.is_gradiant) {
    margin-top: unset;
    z-index: unset;
  }
  .hero_collum .is_gradiant h1 {
    font-size: 5rem !important;
  }

  .hero_collum .is_gradiant h1.mobile_res_small {
  font-size: 5rem !important;
}
}

@media only screen and (min-width: calc(1200px + 10vw)) {
  /* Platzhalter für große Screens */
}