/* =========================================================
   PNFLOW HUB / GUT ZU WISSEN
========================================================= */

.pnflow-hub {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.75%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.08%22%2F%3E%3C%2Fsvg%3E") , linear-gradient(180deg, var(--bg-section-soft) 0%, var(--pnflow-page-bg) 38%, rgba(var(--soft-green-rgb), 0.10) 68%, var(--pnflow-page-bg) 100%);
  background-repeat: repeat, no-repeat;
  background-size: 200px 200px, 100% 100%;
}

.hub-hero,
.hub-page-content {
  background: transparent;
}

/* =========================================================
   HERO
========================================================= */

.hub-hero {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: clamp(72px, 5vw, 96px) 0 clamp(22px, 1.2vw, 36px) !important;
  overflow: hidden;
}

.hub-hero-inner {
  width: min(var(--container-xl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr) !important;
  gap: clamp(70px, 6vw, 110px) !important;
  align-items: center !important;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.hub-hero-content {
  width: 100% !important;
  max-width: 760px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* =========================================================
   HERO TITLE
========================================================= */

.hub-hero-title {
  width: 100% !important;
  margin: clamp(24px, 2vw, 30px) 0 0 !important;
  padding: 0 !important;
}

.hub-hero-title .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-hero-title .elementor-heading-title {
  width: 100% !important;
  max-width: 760px;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(52px, 4vw, 72px) !important;
  line-height: 1.03 !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  text-wrap: balance;
}


/* =========================================================
   HERO TEXT
========================================================= */

.hub-hero-text {
  width: min(100%, 650px) !important;
  margin: clamp(28px, 2.3vw, 36px) 0 0 !important;
  padding: 0 !important;
}

.hub-hero-text .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-hero-text p {
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(var(--primary-rgb), 0.70) !important;
  font-family: var(--font-secondary) !important;
  font-size: clamp(17px, 1.15vw, 19px) !important;
  line-height: 1.62 !important;
  font-weight: 400 !important;
}


/* =========================================================
   HERO LINK
========================================================= */

.hub-hero-link {
  width: auto !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
}

.hub-hero-link .elementor-widget-container,
.hub-hero-link p {
  margin: 0 !important;
  padding: 0 !important;
}

.hub-hero-link a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 0 7px !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  border-bottom: 2px solid rgba(var(--accent-dark-rgb), 0.8);
  transition: color 0.25s ease, border-color 0.25s ease !important;
}

.hub-hero-link a span {
  display: inline-block;
  color: var(--accent-deep) !important;
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 600;
  transition: transform 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .hub-hero-link a:hover {
    color: var(--accent-deep) !important;
  border-color: var(--accent-deep);
  }

  .hub-hero-link a:hover span {
    transform: translateY(3px);
  }
}


/* =========================================================
   HERO VISUAL
========================================================= */

.hub-hero-visual {
  position: relative;
  width: 100% !important;
  max-width: 600px;
  min-width: 0;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hub-hero-image {
  position: relative;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-hero-image .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-hero-image img {
  display: block;
  width: 100% !important;
  height: clamp(360px, 28vw, 470px) !important;
  margin: 0 !important;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-lg) !important;
  box-shadow: 2px 2px 16px 0px rgba(var(--primary-rgb),0.1);
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {
  .hub-hero {
    padding: 72px 0 82px !important;
  }

  .hub-hero-inner {
    width: min(var(--container-xl), calc(100% - 80px)) !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 60px !important;
  }

  .hub-hero-title .elementor-heading-title {
    font-size: clamp(48px, 5vw, 64px) !important;
  }

  .hub-hero-image img {
    height: clamp(350px, 34vw, 440px) !important;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .hub-hero {
    padding: 64px 0 76px !important;
  }

  .hub-hero-inner {
    width: min(var(--container-xl), calc(100% - 64px)) !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr) !important;
    gap: 48px !important;
  }

  .hub-hero-title .elementor-heading-title {
    font-size: clamp(44px, 5.5vw, 58px) !important;
  }

  .hub-hero-text {
    margin-top: 26px !important;
  }

  .hub-hero-image img {
    height: clamp(320px, 36vw, 400px) !important;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .hub-hero {
    padding: 52px 0 64px !important;
  }

  .hub-hero-inner {
    width: calc(100% - 32px) !important;
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  .hub-hero-content {
    max-width: none;
  }

  .hub-hero-title {
    margin-top: 20px !important;
  }

  .hub-hero-title .elementor-heading-title {
    font-size: clamp(38px, 10.5vw, 50px) !important;
    line-height: 1.03 !important;
  }

  .hub-hero-text {
    width: 100% !important;
    margin-top: 24px !important;
  }

  .hub-hero-text p {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  .hub-hero-link {
    margin-top: 26px !important;
  }

  .hub-hero-visual {
    max-width: none;
    margin: 0 !important;
  }

  .hub-hero-image img {
    height: clamp(280px, 78vw, 380px) !important;
    border-radius: var(--radius-lg) !important;
  }
}

/* =========================================================
   HUB PAGE CONTENT
========================================================= */

.hub-page-content {
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: clamp(50px, 3vw, 70px) 0 clamp(100px, 7vw, 135px) !important;
  overflow: hidden;
}

.hub-page-content-inner {
  width: min(var(--container-xl), calc(100% - var(--gutter-xl) * 2)) !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}


/* =========================================================
   HEADING
========================================================= */

.hub-page-content-heading {
  width: min(100%, var(--container-lg)) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  text-align: center !important;
}


/* =========================================================
   TITLE
========================================================= */

.hub-page-content-title {
  width: 100% !important;
  margin: 26px 0 0 !important;
  padding: 0 !important;
}

.hub-page-content-title .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-content-title .elementor-heading-title {
  width: 100% !important;
  max-width: 950px;
  margin: 0 auto !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(42px, 3.2vw, 58px) !important;
  line-height: 1.06 !important;
  font-weight: 500 !important;
  letter-spacing: -0.04em !important;
  text-align: center !important;
  text-wrap: balance;
}


/* =========================================================
   INTRO
========================================================= */

.hub-page-content-intro {
  width: min(100%, 720px) !important;
  margin: 26px auto 0 !important;
  padding: 0 !important;
}

.hub-page-content-intro .elementor-widget-container,
.hub-page-content-intro p {
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-content-intro p {
  color: rgba(var(--primary-rgb), 0.68) !important;
  font-family: var(--font-secondary) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  text-align: center !important;
}


/* =========================================================
   GRID
========================================================= */

.hub-page-grid {
  width: 100% !important;
  margin: clamp(56px, 4.5vw, 76px) 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2vw, 32px) !important;
  align-items: stretch !important;
}


/* =========================================================
   CARD
========================================================= */

.hub-page-grid-card {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 370px;
  margin: 0 !important;
  padding: clamp(34px, 2.3vw, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  background-image: linear-gradient(var(--white), var(--white)), linear-gradient(90deg, var(--secondary-blue), var(--secondary-green));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 0;
  border-top: 10px solid transparent;
  border-radius: 28px;
  box-shadow: 2px 2px 16px 0px rgba(var(--primary-rgb),0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* =========================================================
   NUMBER
========================================================= */

.hub-page-grid-card-number {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-number .elementor-widget-container,
.hub-page-grid-card-number p {
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-number p {
  color: var(--accent-deep) !important;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
}


/* =========================================================
   CARD TITLE
========================================================= */

.hub-page-grid-card-title {
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-title .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* CARD TITLE – nowrap entfernt */
.hub-page-grid-card-title .elementor-heading-title {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: clamp(23px, 1.5vw, 28px) !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  text-align: left !important;
  text-wrap: balance;
}


/* =========================================================
   TAGS
========================================================= */

.hub-page-grid-card-tags {
  width: 100% !important;
  min-height: 44px;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
}

.hub-page-grid-card-tags .elementor-widget-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-tags p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--accent-deep) !important;
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-weight: 600 !important;
  letter-spacing: 0.055em !important;
  text-transform: uppercase !important;
}


/* =========================================================
   CARD TEXT
========================================================= */

.hub-page-grid-card-text {
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-text .elementor-widget-container,
.hub-page-grid-card-text p {
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-text p {
  color: rgba(var(--primary-rgb), 0.70) !important;
  font-family: var(--font-secondary) !important;
  line-height: 1.6 !important;
}


/* =========================================================
   CARD LINK
========================================================= */

.hub-page-grid-card-link {
  width: auto !important;
  margin: auto 0 0 !important;
  padding: 32px 0 0 !important;
}

.hub-page-grid-card-link .elementor-widget-container,
.hub-page-grid-card-link p {
  margin: 0 !important;
  padding: 0 !important;
}

.hub-page-grid-card-link a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
  color: var(--primary) !important;
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.25s ease !important;
}

.hub-page-grid-card-link a span {
  display: inline-block;
  color: var(--accent-deep) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  transition: transform 0.25s ease;
}


/* =========================================================
   HOVER
========================================================= */

@media (hover: hover) and (pointer: fine) {
  .hub-page-grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 52px rgba(var(--primary-rgb), 0.075);
  }

  .hub-page-grid-card:hover .hub-page-grid-card-link a {
    color: var(--accent-deep) !important;
  }

  .hub-page-grid-card:hover .hub-page-grid-card-link a span {
    transform: translateX(4px);
  }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .hub-page-content {
    padding: 88px 0 105px !important;
  }

  .hub-page-content-inner {
    width: calc(100% - 64px) !important;
  }

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

  .hub-page-grid-card {
    min-height: 330px;
  }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .hub-page-content {
    padding: 72px 0 84px !important;
  }

  .hub-page-content-inner {
    width: calc(100% - 32px) !important;
  }

  .hub-page-content-heading {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hub-page-content-title {
    margin-top: 22px !important;
  }

  .hub-page-content-title .elementor-heading-title {
    font-size: clamp(36px, 9.5vw, 46px) !important;
    text-align: left !important;
  }

  .hub-page-content-intro {
    width: 100% !important;
    margin: 22px 0 0 !important;
  }

  .hub-page-content-intro p {
    font-size: 16px !important;
    text-align: left !important;
  }

  .hub-page-grid {
    margin-top: 44px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .hub-page-grid-card {
    min-height: 0;
    padding: 30px 26px !important;
    border-radius: 24px;
  }

  .hub-page-grid-card-title {
    margin-top: 24px !important;
  }

  .hub-page-grid-card-title .elementor-heading-title {
    font-size: 27px !important;
  }

  .hub-page-grid-card-text {
    margin-top: 20px !important;
  }

  .hub-page-grid-card-link {
    margin-top: 30px !important;
    padding: 0 !important;
  }
}