.elementor-kit-5{--e-global-color-primary:#0096E4;--e-global-color-secondary:#00408C;--e-global-color-text:#7A7A7A;--e-global-color-accent:#EDE500;--e-global-color-b1e31ca:#FFFFFF;--e-global-typography-primary-font-family:"Fira Sans";--e-global-typography-primary-font-size:clamp(2.7rem, 4.8vw, 4.6rem);--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Fira Sans";--e-global-typography-secondary-font-size:clamp(1.3rem, 1.45vw, 1.6rem);--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-line-height:1.12rem;--e-global-typography-text-font-family:"Fira Sans";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Fira Sans";--e-global-typography-accent-font-weight:500;--e-global-typography-8f9638d-font-family:"Fira Sans";--e-global-typography-8f9638d-font-size:11rem;--e-global-typography-8f9638d-font-weight:600;--e-global-typography-f231743-font-family:"Fira Sans";--e-global-typography-f231743-font-weight:300;--e-global-typography-649812c-font-family:"Fira Sans";--e-global-typography-649812c-font-weight:500;--e-global-typography-649812c-text-transform:capitalize;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1300px;}.e-con{--container-max-width:1300px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =====================================================
   PROTECTYOURIT – GLOBALES DESIGNSYSTEM
   Vollständiger, konsolidierter Austauschblock

   Ort:
   Elementor
   → Website-Einstellungen
   → Individuelles CSS
   ===================================================== */


/* =====================================================
   01 | DESIGN-TOKENS
   ===================================================== */

:root {
  /* Markenfarben */
  --pyi-color-primary: #00408c;
  --pyi-color-secondary: #0096e4;
  --pyi-color-highlight: #ede500;

  /* Textfarben */
  --pyi-color-heading: #071f46;
  --pyi-color-text: #455368;
  --pyi-color-muted: #68778a;

  /* Flächen */
  --pyi-color-white: #ffffff;
  --pyi-color-surface: #f4f8fc;
  --pyi-color-surface-blue: #edf6ff;

  /* Schrift */
  --pyi-font-primary: "Fira Sans", sans-serif;

  /* Inhaltsbreite */
  --pyi-content-width: 1200px;

  /* Radien */
  --pyi-radius-small: 0.35rem;
  --pyi-radius-card: 0.9rem;
  --pyi-radius-pill: 999px;

  /* Abschnittsabstände */
  --pyi-section-space: clamp(5rem, 7vw, 7rem);
  --pyi-section-space-tablet: 5rem;
  --pyi-section-space-mobile: 4rem;
}


/* =====================================================
   02 | KOMPATIBILITÄTSVARIABLEN
   Für ältere lokale CSS-Blöcke
   ===================================================== */

:root {
  --pyi-font:
    var(--pyi-font-primary, "Fira Sans", sans-serif);

  --pyi-blue-dark:
    var(--pyi-color-primary, #00408c);

  --pyi-blue:
    var(--pyi-color-secondary, #0096e4);

  --pyi-yellow:
    var(--pyi-color-highlight, #ede500);

  --pyi-text:
    var(--pyi-color-heading, #071f46);

  --pyi-text-soft:
    var(--pyi-color-text, #455368);

  --pyi-muted:
    var(--pyi-color-muted, #68778a);

  --pyi-white:
    var(--pyi-color-white, #ffffff);

  --pyi-surface:
    var(--pyi-color-surface, #f4f8fc);

  --pyi-surface-blue:
    var(--pyi-color-surface-blue, #edf6ff);

  --pyi-radius:
    var(--pyi-radius-card, 0.9rem);

  --pyi-pill:
    var(--pyi-radius-pill, 999px);
}


/* =====================================================
   03 | GLOBALE SEITENÜBERSCHRIFT / H1

   Klasse am Überschrift-Widget:
   pyi-page-title

   HTML-Tag:
   H1
   ===================================================== */

.elementor-widget-heading.pyi-page-title
h1.elementor-heading-title {
  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-heading, #071f46) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(2.7rem, 4.8vw, 4.6rem) !important;

  font-weight: 700 !important;
  line-height: 1.03 !important;

  letter-spacing: -0.045em !important;

  -webkit-hyphens: manual !important;
  hyphens: manual !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* H1 – Tablet */

@media (max-width: 1024px) {

  .elementor-widget-heading.pyi-page-title
  h1.elementor-heading-title {
    font-size:
      clamp(2.5rem, 6vw, 3.8rem) !important;

    line-height: 1.04 !important;
  }
}


/* H1 – Mobil */

@media (max-width: 767px) {

  .elementor-widget-heading.pyi-page-title
  h1.elementor-heading-title {
    font-size:
      clamp(2.1rem, 9vw, 2.85rem) !important;

    line-height: 1.07 !important;

    letter-spacing: -0.035em !important;
  }
}


/* =====================================================
   04 | H1-VARIANTE – STARTSEITE

   Zusätzliche Klasse:
   pyi-page-title--home
   ===================================================== */

.elementor-widget-heading.pyi-page-title--home
h1.elementor-heading-title {
  font-size:
    clamp(2.65rem, 3.35vw, 3.75rem) !important;
}


/* Startseiten-H1 – Tablet */

@media (max-width: 1024px) {

  .elementor-widget-heading.pyi-page-title--home
  h1.elementor-heading-title {
    font-size:
      clamp(2.55rem, 6vw, 3.7rem) !important;
  }
}


/* Startseiten-H1 – Mobil */

@media (max-width: 767px) {

  .elementor-widget-heading.pyi-page-title--home
  h1.elementor-heading-title {
    font-size:
      clamp(2.2rem, 9.4vw, 2.85rem) !important;

    line-height: 1.04 !important;

    letter-spacing: -0.045em !important;
  }
}


/* =====================================================
   05 | GLOBALE ABSCHNITTSÜBERSCHRIFT / H2

   Klasse am Überschrift-Widget:
   pyi-section-title

   HTML-Tag:
   H2
   ===================================================== */

.elementor-widget-heading.pyi-section-title
h2.elementor-heading-title {
  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-heading, #071f46) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(2.15rem, 3.15vw, 3.25rem) !important;

  font-weight: 700 !important;
  line-height: 1.08 !important;

  letter-spacing: -0.04em !important;

  -webkit-hyphens: manual !important;
  hyphens: manual !important;

  word-break: normal !important;
  overflow-wrap: normal !important;
}


/* H2 – Tablet */

@media (max-width: 1024px) {

  .elementor-widget-heading.pyi-section-title
  h2.elementor-heading-title {
    font-size:
      clamp(2rem, 5vw, 2.85rem) !important;

    line-height: 1.09 !important;
  }
}


/* H2 – Mobil */

@media (max-width: 767px) {

  .elementor-widget-heading.pyi-section-title
  h2.elementor-heading-title {
    font-size:
      clamp(1.9rem, 8vw, 2.4rem) !important;

    line-height: 1.1 !important;

    letter-spacing: -0.035em !important;
  }
}


/* =====================================================
   06 | GLOBALE EYEBROW

   Basisklasse:
   pyi-section-eyebrow

   Varianten:
   pyi-section-eyebrow--dark
   pyi-section-eyebrow--line
   ===================================================== */

.pyi-section-eyebrow {
  position: relative;

  width: auto !important;

  margin:
    0
    0
    1rem !important;

  padding: 0 !important;
}

.pyi-section-eyebrow
.elementor-heading-title,
.pyi-section-eyebrow
.elementor-widget-container,
.pyi-section-eyebrow p {
  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-secondary, #0096e4) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size: 0.76rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}


/* Dunkelblaue Eyebrow */

.pyi-section-eyebrow--dark
.elementor-heading-title,
.pyi-section-eyebrow--dark
.elementor-widget-container,
.pyi-section-eyebrow--dark p {
  color:
    var(--pyi-color-primary, #00408c) !important;
}


/* Eyebrow mit gelber Linie */

.pyi-section-eyebrow--line {
  padding-bottom: 0.75rem !important;
}

.pyi-section-eyebrow--line::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 2.4rem;
  height: 3px;

  border-radius:
    var(--pyi-radius-pill, 999px);

  background:
    var(--pyi-color-highlight, #ede500);
}


/* Eyebrow – Mobil */

@media (max-width: 767px) {

  .pyi-section-eyebrow {
    margin-bottom: 0.85rem !important;
  }

  .pyi-section-eyebrow
  .elementor-heading-title,
  .pyi-section-eyebrow
  .elementor-widget-container,
  .pyi-section-eyebrow p {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;

    letter-spacing: 0.07em !important;
  }
}


/* =====================================================
   07 | KOMPETENZBEREICH
   ===================================================== */

.pyi-competence {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-x: clip;

  background:
    var(--pyi-color-white, #ffffff);
}


/* Innerer Inhaltsbereich */

.pyi-competence-inner {
  box-sizing: border-box;

  width: min(
    calc(100% - 4rem),
    var(--pyi-content-width, 1200px)
  );

  max-width:
    var(--pyi-content-width, 1200px);

  min-width: 0;

  margin-inline: auto;

  padding:
    var(--pyi-section-space, clamp(5rem, 7vw, 7rem))
    0;
}


/* Inhaltscontainer */

.pyi-competence__content {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;
}


/* Abschnittskopf */

.pyi-competence__head {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  box-sizing: border-box;

  width: 100%;
  max-width: 54rem;
  min-width: 0;

  margin:
    0
    0
    clamp(2.75rem, 4.5vw, 4.25rem);

  padding: 0;
}


/* H2 nur lokal begrenzen */

.pyi-competence__headline {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


/* Einleitung */

.pyi-competence__lead {
  box-sizing: border-box;

  width: 100%;
  max-width: 50rem;
  min-width: 0;

  margin:
    clamp(1.25rem, 2vw, 1.75rem)
    0
    0 !important;

  padding: 0 !important;

  color:
    var(--pyi-color-text, #455368) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(1rem, 1.1vw, 1.12rem) !important;

  font-weight: 400 !important;
  line-height: 1.65 !important;

  overflow-wrap: break-word !important;
}

.pyi-competence__lead p {
  margin: 0 !important;
}


/* Kartenraster */

.pyi-competence__grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  gap:
    clamp(1.25rem, 2vw, 1.75rem) !important;

  margin: 0;
  padding: 0;
}


/* Kartengrundform */

.pyi-competence-card {
  position: relative;

  display: flex !important;
  flex-direction: column !important;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 22rem;

  margin: 0 !important;

  padding:
    clamp(2rem, 3vw, 2.75rem) !important;

  overflow: hidden;

  border:
    1px solid
    rgba(0, 64, 140, 0.12);

  border-radius:
    var(--pyi-radius-card, 0.9rem);

  background:
    var(--pyi-color-surface, #f4f8fc);

  box-shadow:
    0 0.75rem 2rem
    rgba(0, 64, 140, 0.035);
}

.pyi-competence-card >
.elementor-element,
.pyi-competence-card >
.e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}


/* Kartenvarianten */

.pyi-competence-card--privacy {
  background:
    linear-gradient(
      145deg,
      #f3f9ff 0%,
      #ffffff 100%
    );
}

.pyi-competence-card--security {
  background:
    linear-gradient(
      145deg,
      #f5f9fd 0%,
      #ffffff 100%
    );
}

.pyi-competence-card--standards {
  background:
    linear-gradient(
      145deg,
      #edf6ff 0%,
      #ffffff 100%
    );
}

.pyi-competence-card--revision {
  border-color:
    rgba(237, 229, 0, 0.42);

  background:
    linear-gradient(
      145deg,
      #fffdea 0%,
      #ffffff 100%
    );
}


/* Kompetenzbereich – Tablet */

@media (max-width: 1024px) {

  .pyi-competence-inner {
    width: min(
      calc(100% - 3rem),
      var(--pyi-content-width, 1200px)
    );

    padding:
      var(--pyi-section-space-tablet, 5rem)
      0;
  }

  .pyi-competence__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  .pyi-competence-card {
    min-height: 0;
  }
}


/* Kompetenzbereich – Mobil */

@media (max-width: 767px) {

  .pyi-competence {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pyi-competence-inner {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin:
      0
      auto !important;

    padding:
      var(--pyi-section-space-mobile, 4rem)
      1.25rem !important;
  }

  .pyi-competence__content,
  .pyi-competence__head,
  .pyi-competence__headline {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .pyi-competence__head {
    margin-bottom: 2.5rem !important;
  }

  .pyi-competence__lead {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin:
      1.25rem
      0
      0 !important;

    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  .pyi-competence__grid {
    grid-template-columns:
      minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    gap: 1.25rem !important;
  }

  .pyi-competence-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding:
      1.6rem !important;
  }

  .pyi-competence-card
  .elementor-heading-title {
    max-width: 100% !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;

    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }

  .pyi-competence-card
  .elementor-widget-text-editor,
  .pyi-competence-card
  .elementor-widget-text-editor p {
    max-width: 100% !important;

    overflow-wrap: break-word !important;
  }
}

/* =====================================================
   08 | PARTNERBEREICH

   Tatsächliche Struktur:
   pyi-partner
   └── pyi-partner__inner
       ├── pyi-partner__intro
       └── pyi-partner__main
           ├── pyi-partner__visual
           └── pyi-partner__body
               ├── pyi-partner-benefits
               └── pyi-partner__contact
   ===================================================== */


/* =====================================================
   ABSCHNITTSFLÄCHE
   ===================================================== */

.pyi-partner {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-x: clip;

  background:
    linear-gradient(
      180deg,
      #f4f9fd 0%,
      #edf6ff 100%
    );
}


/* =====================================================
   INNERER GESAMTBEREICH
   ===================================================== */

.pyi-partner__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  box-sizing: border-box;

  width: min(
    calc(100% - 4rem),
    var(--pyi-content-width, 1200px)
  );

  max-width:
    var(--pyi-content-width, 1200px);

  min-width: 0;

  margin-inline: auto;

  padding:
    var(--pyi-section-space, clamp(5rem, 7vw, 7rem))
    0;
}


/* =====================================================
   ABSCHNITTSKOPF
   ===================================================== */

.pyi-partner__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  box-sizing: border-box;

  width: 100%;
  max-width: 58rem;
  min-width: 0;

  margin:
    0
    auto
    clamp(3rem, 5vw, 4.5rem);

  padding: 0;

  text-align: center;
}


/* Eyebrow zentrieren */

.pyi-partner__label {
  margin-right: auto !important;
  margin-left: auto !important;
}

.pyi-partner__label::after {
  left: 50% !important;

  transform:
    translateX(-50%);
}


/* H2 lokal begrenzen */

.pyi-partner__title {
  box-sizing: border-box;

  width: 100%;
  max-width: 56rem;
  min-width: 0;

  margin:
    0
    auto !important;

  padding: 0 !important;

  text-align: center;
}


/* Einleitung */

.pyi-partner__intro-text {
  box-sizing: border-box;

  width: 100%;
  max-width: 48rem;
  min-width: 0;

  margin:
    clamp(1.25rem, 2vw, 1.75rem)
    auto
    0 !important;

  padding: 0 !important;

  color:
    var(--pyi-color-text, #455368) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(1rem, 1.1vw, 1.12rem) !important;

  font-weight: 400 !important;
  line-height: 1.65 !important;

  text-align: center;

  overflow-wrap: break-word !important;
}

.pyi-partner__intro-text p {
  margin: 0 !important;
}


/* =====================================================
   PARTNER-HAUPTBEREICH

   Bild links, Inhalte rechts
   ===================================================== */

.pyi-partner__main {
  display: grid !important;

  grid-template-columns:
    minmax(20rem, 0.78fr)
    minmax(0, 1.22fr);

  align-items: stretch !important;

  gap:
    clamp(2rem, 4vw, 4rem);

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   BILDBEREICH
   ===================================================== */

./* =====================================================
   BILDBEREICH
   ===================================================== */

.pyi-partner__visual {
  position: relative;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 38rem;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden;

  border-radius:
    var(--pyi-radius-card, 0.9rem);

  background:
    #eaf4fc;
}


/*
   Ausschließlich das eigentliche Foto erhält
   die volle Höhe des Bildcontainers.
*/

.pyi-partner__visual
> .pyi-partner__image {
  position: absolute !important;

  inset: 0 !important;

  z-index: 1;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


.pyi-partner__visual
> .pyi-partner__image
> .elementor-widget-container,
.pyi-partner__visual
> .pyi-partner__image
picture {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


.pyi-partner__visual
> .pyi-partner__image img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: cover !important;
  object-position: center center !important;
}

/* =====================================================
   RECHTER INHALTSBEREICH
   ===================================================== */

.pyi-partner__body {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap:
    clamp(1.5rem, 2.5vw, 2rem);

  margin: 0 !important;
  padding: 0 !important;
}


/* =====================================================
   VORTEILE-GRID
   ===================================================== */

.pyi-partner-benefits {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  gap:
    clamp(1.25rem, 2vw, 1.75rem) !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Einzelner Vorteil */

.pyi-partner__benefit {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 11rem;

  margin: 0 !important;

  padding:
    clamp(1.35rem, 2vw, 1.75rem) !important;

  border:
    1px solid
    rgba(0, 64, 140, 0.1);

  border-radius:
    var(--pyi-radius-card, 0.9rem);

  background:
    rgba(255, 255, 255, 0.72);
}


/* Vorteil-Icon */

.pyi-partner-benefit__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 3.15rem !important;
  height: 3.15rem !important;
  min-width: 3.15rem !important;

  margin:
    0
    0
    0.85rem !important;

  padding: 0 !important;

  border:
    1px solid
    rgba(0, 150, 228, 0.18);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.8);
}

.pyi-partner-benefit__icon
.elementor-icon {
  color:
    var(--pyi-color-primary, #00408c) !important;

  font-size: 1.25rem !important;
}


/* Vorteilstitel */

.pyi-partner-benefit__title,
.pyi-partner-benefit__title
.elementor-heading-title {
  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-primary, #00408c) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(1.05rem, 1.2vw, 1.25rem) !important;

  font-weight: 700 !important;
  line-height: 1.22 !important;

  letter-spacing: -0.02em !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* Vorteiltext */

.pyi-partner-benefit__text {
  width: 100%;
  max-width: 100%;

  margin:
    0.55rem
    0
    0 !important;

  padding: 0 !important;

  color:
    var(--pyi-color-text, #455368) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size: 0.94rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;

  overflow-wrap: break-word !important;
}

.pyi-partner-benefit__text p {
  margin: 0 !important;
}


/* =====================================================
   BLAUE KONTAKTKARTE

   Inhalt links, Button rechts
   ===================================================== */

.pyi-partner__contact {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  align-items: center !important;

  column-gap:
    clamp(1.5rem, 3vw, 2.75rem);

  row-gap: 0;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;

  padding:
    clamp(1.75rem, 3vw, 2.5rem) !important;

  overflow: hidden;

  border-radius:
    var(--pyi-radius-card, 0.9rem);

  background:
    linear-gradient(
      145deg,
      #00408c 0%,
      #0076c4 72%,
      #0096e4 100%
    );

  box-shadow:
    0 1rem 2.75rem
    rgba(0, 64, 140, 0.16);
}


/* Kontaktkartentitel */

.pyi-partner__contact-title {
  grid-column: 1;
}

.pyi-partner__contact-title,
.pyi-partner__contact-title
.elementor-heading-title {
  width: 100%;
  max-width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-white, #ffffff) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(1.45rem, 1.9vw, 1.85rem) !important;

  font-weight: 700 !important;
  line-height: 1.16 !important;

  letter-spacing: -0.03em !important;

  word-break: normal !important;
  overflow-wrap: break-word !important;
}


/* Kontaktkartentext */

.pyi-partner__contact-text {
  grid-column: 1;

  width: 100%;
  max-width: 100%;

  margin:
    1rem
    0
    0 !important;

  padding: 0 !important;

  color:
    rgba(255, 255, 255, 0.86) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size: 0.98rem !important;
  line-height: 1.55 !important;

  overflow-wrap: break-word !important;
}

.pyi-partner__contact-text p {
  margin: 0 !important;
}


/* Kontaktliste */

.pyi-partner__contact-list {
  grid-column: 1;

  width: 100%;

  margin:
    1.2rem
    0
    0 !important;

  padding: 0 !important;
}

.pyi-partner__contact-list ul,
.pyi-partner__contact-list
.elementor-icon-list-items {
  display: flex !important;
  flex-direction: column !important;

  gap: 0.65rem !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.pyi-partner__contact-list li,
.pyi-partner__contact-list
.elementor-icon-list-item {
  margin: 0 !important;
  padding: 0 !important;

  color:
    var(--pyi-color-white, #ffffff) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size: 0.94rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.pyi-partner__contact-list
.elementor-icon-list-icon {
  color:
    #4bd1ff !important;
}


/* Kontaktbutton */

.pyi-partner__button {
  grid-column: 2;
  grid-row: 1 / 4;

  align-self: center;

  width: auto !important;
  min-width: max-content;

  margin: 0 !important;
  padding: 0 !important;
}

.pyi-partner__button
.elementor-button {
  width: auto !important;
  min-width: 10rem;
  min-height: 3.2rem;

  padding:
    0.85rem
    1.35rem !important;

  border:
    1px solid
    var(--pyi-color-highlight, #ede500) !important;

  border-radius:
    var(--pyi-radius-pill, 999px) !important;

  background:
    var(--pyi-color-highlight, #ede500) !important;

  color:
    var(--pyi-color-primary, #00408c) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size: 0.94rem !important;
  font-weight: 700 !important;

  text-align: center !important;
  white-space: nowrap !important;
}

.pyi-partner__button
.elementor-button:hover,
.pyi-partner__button
.elementor-button:focus {
  border-color:
    var(--pyi-color-white, #ffffff) !important;

  background:
    var(--pyi-color-white, #ffffff) !important;

  color:
    var(--pyi-color-primary, #00408c) !important;
}


/* =====================================================
   PARTNERBEREICH – TABLET
   ===================================================== */

@media (max-width: 1024px) {

  .pyi-partner__inner {
    width: min(
      calc(100% - 3rem),
      var(--pyi-content-width, 1200px)
    );

    padding:
      var(--pyi-section-space-tablet, 5rem)
      0;
  }

  .pyi-partner__main {
    grid-template-columns:
      minmax(0, 1fr);
  }

  .pyi-partner__visual {
    min-height: 26rem;
  }


  .pyi-partner-benefits {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =====================================================
   PARTNERBEREICH – MOBIL
   ===================================================== */

@media (max-width: 767px) {

  .pyi-partner__inner {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin:
      0
      auto !important;

    padding:
      var(--pyi-section-space-mobile, 4rem)
      1.25rem !important;
  }


  /* Abschnittskopf linksbündig */

  .pyi-partner__intro {
    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-bottom: 2.5rem !important;

    text-align: left;
  }

  .pyi-partner__label {
    margin-left: 0 !important;
  }

  .pyi-partner__label::after {
    left: 0 !important;

    transform: none !important;
  }

  .pyi-partner__title,
  .pyi-partner__intro-text {
    width: 100% !important;
    max-width: 100% !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    text-align: left;
  }


  /* Bild */

  .pyi-partner__main {
    grid-template-columns:
      minmax(0, 1fr);

    gap: 1.75rem;
  }

  .pyi-partner__visual {
    min-height: 18rem;
  }


  /* Vorteile etwas stärker einrücken */

  .pyi-partner-benefits {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 1rem !important;

    padding-right: 0.85rem !important;
    padding-left: 0.85rem !important;
  }

  .pyi-partner__benefit {
    min-height: 0;

    padding:
      1.35rem !important;
  }


  /* Kontaktkarte */

  .pyi-partner__contact {
    grid-template-columns:
      minmax(0, 1fr);

    padding:
      1.75rem !important;
  }

  .pyi-partner__contact-title,
  .pyi-partner__contact-text,
  .pyi-partner__contact-list,
  .pyi-partner__button {
    grid-column: 1;
    grid-row: auto;
  }

  .pyi-partner__contact-title,
  .pyi-partner__contact-title
  .elementor-heading-title {
    font-size:
      clamp(1.45rem, 7vw, 1.8rem) !important;
  }

  .pyi-partner__button {
    width: 100% !important;

    margin-top:
      1.5rem !important;
  }

  .pyi-partner__button,
  .pyi-partner__button
  .elementor-button {
    width: 100% !important;
  }
}

/* =====================================================
   09 | REFERENZBEREICH
   ===================================================== */

.pyi-references {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  overflow-x: hidden;
  overflow-x: clip;

  background:
    var(--pyi-color-white, #ffffff);
}


/* Innerer Inhaltsbereich */

.pyi-references__inner {
  box-sizing: border-box;

  width: min(
    calc(100% - 4rem),
    var(--pyi-content-width, 1200px)
  );

  max-width:
    var(--pyi-content-width, 1200px);

  min-width: 0;

  margin-inline: auto;

  padding:
    var(--pyi-section-space, clamp(5rem, 7vw, 7rem))
    0;
}


/* Einleitungskopf */

.pyi-references__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  box-sizing: border-box;

  width: 100%;
  max-width: 52rem;
  min-width: 0;

  margin:
    0
    0
    clamp(2.75rem, 4.5vw, 4.25rem);

  padding: 0;
}


/* H2 nur lokal begrenzen */

.pyi-references__title {
  box-sizing: border-box;

  width: 100%;
  max-width: 48rem;
  min-width: 0;

  margin: 0 !important;
  padding: 0 !important;
}


/* Einführungstext */

.pyi-references__intro-text {
  box-sizing: border-box;

  width: 100%;
  max-width: 48rem;
  min-width: 0;

  margin:
    clamp(1.25rem, 2vw, 1.75rem)
    0
    0 !important;

  padding: 0 !important;

  color:
    var(--pyi-color-text, #455368) !important;

  font-family:
    var(--pyi-font-primary, "Fira Sans", sans-serif) !important;

  font-size:
    clamp(1rem, 1.1vw, 1.12rem) !important;

  font-weight: 400 !important;
  line-height: 1.65 !important;

  overflow-wrap: break-word !important;
}

.pyi-references__intro-text p {
  margin: 0 !important;
}


/* Referenzbereich – Tablet */

@media (max-width: 1024px) {

  .pyi-references__inner {
    width: min(
      calc(100% - 3rem),
      var(--pyi-content-width, 1200px)
    );

    padding:
      var(--pyi-section-space-tablet, 5rem)
      0;
  }
}


/* Referenzbereich – Mobil */

@media (max-width: 767px) {

  .pyi-references {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pyi-references__inner {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin:
      0
      auto !important;

    padding:
      var(--pyi-section-space-mobile, 4rem)
      1.25rem !important;
  }

  .pyi-references__intro,
  .pyi-references__title {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .pyi-references__intro {
    margin-bottom: 2.5rem !important;
  }

  .pyi-references__intro-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-top: 1.25rem !important;

    font-size: 1rem !important;
    line-height: 1.6 !important;
  }
}

/* =====================================================
   H2-VARIANTE – KOMPAKT

   Für kurze Abschnittsüberschriften, die visuell
   etwas zurückhaltender erscheinen sollen.
   ===================================================== */

.elementor-widget-heading.pyi-section-title--compact
h2.elementor-heading-title {
  font-size:
    clamp(1.9rem, 2.55vw, 2.7rem) !important;

  line-height:
    1.08 !important;
}


/* Tablet */

@media (max-width: 1024px) {

  .elementor-widget-heading.pyi-section-title--compact
  h2.elementor-heading-title {
    font-size:
      clamp(1.85rem, 4.4vw, 2.5rem) !important;
  }
}


/* Mobil */

@media (max-width: 767px) {

  .elementor-widget-heading.pyi-section-title--compact
  h2.elementor-heading-title {
    font-size:
      clamp(1.75rem, 7.4vw, 2.15rem) !important;

    line-height:
      1.1 !important;
  }
}

/* Eyebrow auf dunklem Hintergrund */

.elementor-widget.pyi-section-eyebrow--light,
.elementor-widget.pyi-section-eyebrow--light *,
.elementor-widget.pyi-section-eyebrow--light .elementor-heading-title {
  color: #ffffff !important;
}

.elementor-widget.pyi-section-eyebrow--light::before,
.elementor-widget.pyi-section-eyebrow--light::after {
  background: rgba(255, 255, 255, 0.55) !important;
}

/* Hinweis im Hero-Bereich der Hautanalyse */
.hero-hautanalyse {
  position: relative;
}

.hero-hautanalyse .ki-hinweis {
  position: absolute;
  right: 18%;
  bottom: 28px;
  z-index: 5;

  color: rgba(80, 80, 80, 0.75);
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.02em;

  pointer-events: none;
}

/* Bezugspunkt für das KI-Label */
.ki-header {
  position: relative;
}

/* KI-Label absolut im Hero positionieren */
.ki-header .ki-label {
  --container-widget-width: auto;
  --container-widget-flex-grow: 0;

  position: absolute !important;
  top: auto !important;
  right: 25px !important;
  bottom: 25px !important;
  left: auto !important;

  width: auto !important;
  max-width: none !important;
  margin: 0 !important;

  z-index: 20;
  line-height: 0;
  pointer-events: none;
}

.ki-header .ki-label img,
.ki-header .ki-label svg {
  display: block;
  max-width: none !important;
  height: auto;
}
/* Rundes AI-Label */
.ki-header .ki-label--rund img,
.ki-header .ki-label--rund svg {
  width: clamp(1.5rem, 3vw, 2.0rem) !important;
}

/* Breite Labels */
.ki-header .ki-label--breit img,
.ki-header .ki-label--breit svg {
  width: clamp(6.0rem, 8vw, 8rem) !important;
}

/* =====================================================
   PROTECTYOURIT – GLOBALE KI-KENNZEICHNUNG

   Bildcontainer:
   pyi-ai-media

   Label:
   pyi-ai-label

   Varianten:
   pyi-ai-label--hero
   pyi-ai-label--small
   ===================================================== */


/* =====================================================
   01 | BILDCONTAINER
   ===================================================== */

.pyi-ai-media {
  position: relative !important;
  isolation: isolate;

  box-sizing: border-box;

  overflow: hidden;
}


/* =====================================================
   02 | LABEL-WIDGET
   ===================================================== */

.pyi-ai-media
> .pyi-ai-label {
  position: absolute !important;

  top: auto !important;
  right: 0.85rem !important;
  bottom: 0.85rem !important;
  left: auto !important;

  z-index: 50 !important;

  display: block !important;

  align-self: auto !important;

  flex: none !important;

  width: auto !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  line-height: 0 !important;

  pointer-events: none;
}


/* =====================================================
   03 | ELEMENTOR-INNENSTRUKTUR
   ===================================================== */

.pyi-ai-media
> .pyi-ai-label
> .elementor-widget-container {
  display: block !important;

  width: auto !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
}


.pyi-ai-media
> .pyi-ai-label
picture,
.pyi-ai-media
> .pyi-ai-label
a {
  display: block !important;

  width: auto !important;
  height: auto !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 0 !important;
}


/* =====================================================
   04 | LABEL-DATEI
   ===================================================== */

.pyi-ai-media
> .pyi-ai-label img,
.pyi-ai-media
> .pyi-ai-label svg {
  display: block !important;

  width: 5rem !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 0.2rem 0.4rem
      rgba(0, 0, 0, 0.2)
    );
}


/* =====================================================
   05 | HERO-VARIANTE
   ===================================================== */

.pyi-ai-media
> .pyi-ai-label--hero {
  right:
    clamp(1rem, 1.5vw, 1.6rem) !important;

  bottom:
    clamp(1rem, 1.5vw, 1.6rem) !important;
}


.pyi-ai-media
> .pyi-ai-label--hero img,
.pyi-ai-media
> .pyi-ai-label--hero svg {
  width:
    clamp(5.5rem, 6vw, 7rem) !important;
}


/* =====================================================
   06 | KLEINE BILDVARIANTE
   ===================================================== */

.pyi-ai-media
> .pyi-ai-label--small {
  right:
    clamp(0.65rem, 1vw, 0.85rem) !important;

  bottom:
    clamp(0.65rem, 1vw, 0.85rem) !important;
}


.pyi-ai-media
> .pyi-ai-label--small img,
.pyi-ai-media
> .pyi-ai-label--small svg {
  width:
    clamp(4rem, 4.4vw, 4.75rem) !important;
}


/* =====================================================
   07 | TABLET
   ===================================================== */

@media (max-width: 1024px) {

  .pyi-ai-media
  > .pyi-ai-label {
    right: 0.75rem !important;
    bottom: 0.75rem !important;
  }

  .pyi-ai-media
  > .pyi-ai-label--hero img,
  .pyi-ai-media
  > .pyi-ai-label--hero svg {
    width: 5.3rem !important;
  }

  .pyi-ai-media
  > .pyi-ai-label--small img,
  .pyi-ai-media
  > .pyi-ai-label--small svg {
    width: 4.35rem !important;
  }
}


/* =====================================================
   08 | MOBIL
   ===================================================== */

@media (max-width: 767px) {

  .pyi-ai-media
  > .pyi-ai-label {
    right: 0.6rem !important;
    bottom: 0.6rem !important;
  }

  .pyi-ai-media
  > .pyi-ai-label--hero img,
  .pyi-ai-media
  > .pyi-ai-label--hero svg {
    width: 4.8rem !important;
  }

  .pyi-ai-media
  > .pyi-ai-label--small img,
  .pyi-ai-media
  > .pyi-ai-label--small svg {
    width: 3.9rem !important;
  }
}

/* =====================================================
   PROTECTYOURIT – STICKY SMART HEADER

   Klasse am äußersten Header-Container:
   pyi-header

   Verhalten:
   – Header bleibt oben fixiert
   – verschwindet beim Herunterscrollen ab 500 px
   – erscheint beim Hochscrollen sofort wieder
   ===================================================== */


/* =====================================================
   01 | PLATZ FÜR DEN FIXIERTEN HEADER
   Höhe wird automatisch per JavaScript gesetzt
   ===================================================== */

body:not(.elementor-editor-active) {
  padding-top:
    var(--pyi-header-height, 0px);
}


/* =====================================================
   02 | HEADER-GRUNDFORM
   ===================================================== */

.pyi-header {
  position: fixed !important;

  top: 0;
  right: 0;
  left: 0;

  z-index: 9999 !important;

  box-sizing: border-box;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 220ms ease,
    background-color 220ms ease;

  will-change:
    transform;
}


/* =====================================================
   03 | HEADER AUSBLENDEN
   ===================================================== */

.pyi-header.is-hidden {
  transform:
    translate3d(0, calc(-100% - 2px), 0);

  pointer-events:
    none;
}


/* =====================================================
   04 | DEZENTER SCHATTEN NACH DEM ANSCROLLEN
   ===================================================== */

.pyi-header.is-scrolled {
  box-shadow:
    0 0.45rem 1.5rem
    rgba(7, 31, 70, 0.09);
}


/* =====================================================
   05 | WORDPRESS-ADMINLEISTE
   Nur sichtbar, wenn man eingeloggt ist
   ===================================================== */

body.admin-bar
.pyi-header {
  top:
    32px;
}

@media (max-width: 782px) {

  body.admin-bar
  .pyi-header {
    top:
      46px;
  }
}


/* =====================================================
   06 | ELEMENTOR-EDITOR
   Im Editor nicht fixieren oder ausblenden
   ===================================================== */

body.elementor-editor-active
.pyi-header {
  position:
    relative !important;

  top:
    auto !important;

  transform:
    none !important;

  pointer-events:
    auto !important;
}


/* =====================================================
   07 | REDUZIERTE BEWEGUNG
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  .pyi-header {
    transition:
      none !important;
  }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://protectyourit.eu/wp-content/uploads/2026/07/FiraSans-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://protectyourit.eu/wp-content/uploads/2026/07/FiraSans-Medium-1.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://protectyourit.eu/wp-content/uploads/2026/07/FiraSans-SemiBold-1.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://protectyourit.eu/wp-content/uploads/2026/07/FiraSans-Bold-1.woff2') format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://protectyourit.eu/wp-content/uploads/2026/07/FiraSans-Light-1.woff2') format('woff2');
}
/* End Custom Fonts CSS */