/* =========================================================
   MAGLANO GO – SECOND STAGE
   ========================================================= */

.second-stage {
  width: 100%;
  padding: clamp(20px, 3vw, 38px) 24px clamp(76px, 7vw, 110px);
  background: #ffffff;
  color: #0B2547;
}

.second-stage-shell {
  width: min(1220px, 100%);
  margin: 0 auto;
}


/* =========================================================
   TITEL
   ========================================================= */

.second-stage-heading {
  max-width: 760px;
  margin: 0 auto clamp(26px, 3vw, 38px);
  text-align: center;
}

.second-stage-heading h2 {
  margin: 0;
  color: #0B2547;
  font-size: clamp(2.15rem, 3.4vw, 3.35rem);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -0.035em;
}

.second-stage-heading p {
  margin: 9px 0 0;
  color: #68778A;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.5;
}


/* =========================================================
   ALLGEMEINE KACHELN
   ========================================================= */

.stage-card {
  position: relative;
  background: rgba(255,255,255,0.985);
  border: 1px solid #D7E1EE;
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(11,37,71,0.04);
  overflow: hidden;
}

.stage-card h3 {
  margin: 0;
  color: #0B2547;
  font-size: clamp(1.25rem, 1.75vw, 1.55rem);
  line-height: 1.18;
  font-weight: 740;
  letter-spacing: -0.015em;
}

.stage-card p {
  margin: 0;
  color: #52647A;
  font-size: clamp(0.96rem, 1.15vw, 1.05rem);
  line-height: 1.58;
}


/* =========================================================
   1. DREI SCHRITTE
   ========================================================= */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
  margin-bottom: 24px;
}

.step-card {
  padding: 27px 26px 25px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
}

.step-number {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border-radius: 999px;

  /* MAGLANO DUNKELBLAU */
  background: #0B2547;

  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 760;
  line-height: 1;
}

.step-card h3 {
  min-height: 2.4em;
  margin-bottom: 16px;
}

.step-card > p {
  margin-top: 18px;
  flex: 1;
}


/* =========================================================
   PLATZHALTER
   ========================================================= */

.image-placeholder {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  border: 1.5px dashed #B9CBE2;
  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(247,250,254,0.97) 0%,
      rgba(252,253,255,0.98) 100%
    );

  color: #68778A;
}

.image-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      -28deg,
      rgba(18,105,232,0.045) 0,
      rgba(18,105,232,0.045) 2px,
      transparent 2px,
      transparent 18px
    );
}

.image-placeholder::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(18,105,232,0.07);
  border-radius: 13px;
}

.image-placeholder span {
  position: relative;
  z-index: 2;
  color: #68778A;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 650;
}

.placeholder-symbol {
  position: relative;
  z-index: 2;

  width: 34px;
  height: 34px;
  margin-bottom: 8px;

  display: grid;
  place-items: center;

  border: 1px solid #B9CBE2;
  border-radius: 50%;

  background: #ffffff;
  color: #1269E8;
  font-size: 1rem;
}

.placeholder-symbol-large {
  width: 40px;
  height: 40px;
}

.image-placeholder-step {
  height: 150px;
  min-height: 150px;
  flex: 0 0 150px;
}


/* =========================================================
   2. AUFTRAGGEBER / FAHRER
   ========================================================= */

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  margin-bottom: 24px;
}

.audience-card {
  min-height: 350px;
  padding: 30px 30px 26px;

  display: grid;
  grid-template-columns:
    minmax(0,1.25fr)
    minmax(165px,0.75fr);

  gap: 26px;
  align-items: stretch;
}

.audience-copy {
  min-width: 0;
}

.audience-copy h3 {
  margin-bottom: 13px;
}

.audience-intro {
  margin-bottom: 22px !important;
}

.audience-list {
  margin: 0;
  padding: 0;
  list-style: none;

  display: grid;
  gap: 13px;
}

.audience-list li {
  position: relative;
  padding-left: 31px;

  color: #40546D;
  font-size: clamp(0.92rem,1.1vw,1rem);
  line-height: 1.48;
}

.audience-list li::before {
  content: "✓";

  position: absolute;
  left: 0;
  top: 0.04em;

  width: 20px;
  height: 20px;

  display: grid;
  place-items: center;

  border: 1.5px solid #0B2547;
  border-radius: 50%;

  color: #0B2547;
  font-size: 0.7rem;
  font-weight: 800;
}

.image-placeholder-audience {
  min-height: 230px;
  align-self: stretch;
}


/* =========================================================
   3. WENN PLATZ DA IST
   ========================================================= */

.impact-card {
  min-height: 220px;
  margin-bottom: clamp(48px,5vw,66px);
  padding: 34px 38px;

  display: grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(280px,0.75fr);

  gap: 34px;
  align-items: center;
}

.impact-copy {
  min-width: 0;
}

.impact-card h3 {
  max-width: 690px;
  margin-bottom: 14px;
  font-size: clamp(1.6rem,2.3vw,2.15rem);
}

.impact-card p {
  max-width: 720px;
}

.image-placeholder-impact {
  min-height: 155px;
}


/* =========================================================
   4. FAQ
   ========================================================= */

.faq-section {
  width: 100%;
  margin: 0 auto;
}

.faq-heading {
  margin-bottom: 26px;
  text-align: center;
}

.faq-heading h2 {
  margin: 0;

  color: #0B2547;

  font-size: clamp(1.85rem,2.8vw,2.55rem);
  line-height: 1.08;

  font-weight: 750;
  letter-spacing: -0.025em;
}

.faq-heading p {
  margin: 10px 0 0;
  color: #68778A;
  font-size: 1rem;
  line-height: 1.5;
}

.faq-layout {
  width: min(1120px,100%);
  margin: 0 auto;

  display: grid;

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

  gap: 30px;

  align-items: end;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #D7E1EE;
  border-radius: 16px;
  overflow: hidden;

  box-shadow:
    0 7px 22px rgba(11,37,71,0.03);
}

.faq-item summary {
  position: relative;

  padding:
    20px
    56px
    20px
    22px;

  cursor: pointer;
  list-style: none;

  color: #0B2547;

  font-size: 1rem;
  line-height: 1.4;
  font-weight: 670;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";

  position: absolute;

  right: 22px;
  top: 50%;

  transform: translateY(-50%);

  color: #0B2547;

  font-size: 1.45rem;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-answer {
  padding:
    0
    56px
    22px
    22px;

  color: #52647A;

  font-size: 0.95rem;
  line-height: 1.62;
}

.image-placeholder-faq {
  width: 260px;
  height: 220px;
  min-height: 220px;

  align-self: end;
  justify-self: end;
}


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

@media (max-width: 980px) {

  .second-stage {
    padding:
      24px
      20px
      82px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .step-card {
    min-height: 0;
  }

  .step-card h3 {
    min-height: 0;
  }

  .image-placeholder-step {
    height: 180px;
    min-height: 180px;
    flex-basis: 180px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
  }

  .audience-card {
    min-height: 0;

    grid-template-columns:
      minmax(0,1.3fr)
      minmax(190px,0.7fr);
  }

  .impact-card {
    grid-template-columns: 1fr;
  }

  .faq-layout {
    grid-template-columns:
      minmax(0,1fr)
      220px;

    gap: 22px;
  }

  .image-placeholder-faq {
    width: 220px;
    height: 200px;
    min-height: 200px;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 680px) {

  .second-stage {
    padding:
      18px
      14px
      66px;
  }

  .second-stage-heading {
    margin-bottom: 22px;
  }

  .second-stage-heading h2 {
    font-size: clamp(1.9rem,9vw,2.35rem);
  }

  .second-stage-heading p {
    margin-top: 7px;
    font-size: 0.96rem;
  }

  .steps-grid {
    gap: 15px;
    margin-bottom: 15px;
  }

  .stage-card {
    border-radius: 20px;
  }

  .step-card {
    padding:
      22px
      20px
      21px;

    min-height: 0;
  }

  .step-number {
    width: 38px;
    height: 38px;

    flex-basis: 38px;

    margin-bottom: 15px;
  }

  .step-card h3 {
    min-height: 0;
    margin-bottom: 14px;
  }

  .image-placeholder-step {
    height: 155px;
    min-height: 155px;
    flex-basis: 155px;
  }

  .step-card > p {
    margin-top: 16px;
  }

  .audience-grid {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 15px;
  }

  .audience-card {
    grid-template-columns: 1fr;

    min-height: 0;

    padding:
      26px
      22px
      22px;

    gap: 22px;
  }

  .image-placeholder-audience {
    min-height: 165px;
  }

  .impact-card {
    min-height: 0;

    margin-bottom: 48px;

    padding:
      26px
      22px;

    gap: 22px;
  }

  .impact-card h3 {
    font-size: 1.55rem;
  }

  .image-placeholder-impact {
    min-height: 150px;
  }

  .faq-heading {
    margin-bottom: 20px;
  }

  .faq-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .faq-item summary {
    padding:
      19px
      50px
      19px
      18px;
  }

  .faq-answer {
    padding:
      0
      50px
      20px
      18px;
  }

  .image-placeholder-faq {
    width: 72%;
    max-width: 300px;

    height: 175px;
    min-height: 175px;

    justify-self: end;
  }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

  .second-stage {
    padding-left: 12px;
    padding-right: 12px;
  }

  .image-placeholder span {
    font-size: 0.78rem;
  }

  .image-placeholder-faq {
    width: 78%;
    height: 160px;
    min-height: 160px;
  }

}

/* === FINAL FAQ CARD START === */

/* =========================================================
   HÄUFIGE FRAGEN ALS GEMEINSAME KACHEL
   ========================================================= */

.faq-section {
  width: min(1220px, 100%) !important;

  margin: 0 auto !important;

  padding:
    34px
    38px
    38px !important;

  background: #ffffff !important;

  border:
    1px
    solid
    #D7E1EE !important;

  border-radius:
    24px !important;

  box-shadow:
    0
    10px
    32px
    rgba(11, 37, 71, 0.04) !important;
}


/* ---------------------------------------------------------
   FAQ-Titel innerhalb der Kachel
   --------------------------------------------------------- */

.faq-heading {
  margin:
    0
    0
    30px !important;

  text-align:
    center !important;
}


.faq-heading h2 {
  margin: 0 !important;

  color:
    #0B2547 !important;
}


.faq-heading p {
  margin:
    10px
    0
    0 !important;
}


/* ---------------------------------------------------------
   Fragen links / Illustration rechts
   --------------------------------------------------------- */

.faq-layout {
  width: 100% !important;

  margin: 0 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    300px !important;

  gap:
    clamp(
      34px,
      5vw,
      64px
    ) !important;

  align-items:
    center !important;
}


/* ---------------------------------------------------------
   Einzelne Fragen
   --------------------------------------------------------- */

.faq-list {
  width: 100% !important;

  display: grid !important;

  gap: 12px !important;
}


.faq-item {
  width: 100% !important;

  background:
    #ffffff !important;

  border:
    1px
    solid
    #D7E1EE !important;

  border-radius:
    16px !important;

  box-shadow:
    none !important;
}


/* ---------------------------------------------------------
   FAQ-BILDPLATZHALTER
   zentriert innerhalb des rechten Bereichs
   --------------------------------------------------------- */

.image-placeholder-faq {
  width: 260px !important;

  height: 220px !important;

  min-height: 220px !important;

  margin: 0 !important;

  align-self:
    center !important;

  justify-self:
    center !important;
}


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

@media (max-width: 980px) {

  .faq-section {
    padding:
      30px
      28px
      32px !important;
  }


  .faq-layout {
    grid-template-columns:
      minmax(0, 1fr)
      230px !important;

    gap: 28px !important;
  }


  .image-placeholder-faq {
    width: 220px !important;

    height: 200px !important;

    min-height: 200px !important;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 680px) {

  .faq-section {
    padding:
      28px
      20px
      24px !important;

    border-radius:
      20px !important;
  }


  .faq-heading {
    margin-bottom:
      24px !important;
  }


  .faq-layout {
    grid-template-columns:
      1fr !important;

    gap:
      26px !important;
  }


  .image-placeholder-faq {
    width:
      min(
        260px,
        82%
      ) !important;

    height:
      175px !important;

    min-height:
      175px !important;

    align-self:
      center !important;

    justify-self:
      center !important;
  }

}


/* =========================================================
   KLEINE SMARTPHONES
   ========================================================= */

@media (max-width: 390px) {

  .faq-section {
    padding:
      24px
      16px
      22px !important;
  }


  .image-placeholder-faq {
    width:
      min(
        235px,
        86%
      ) !important;

    height:
      160px !important;

    min-height:
      160px !important;
  }

}

/* === FINAL FAQ CARD END === */

/* === MAGLANO FINAL FAQ 2026-08-08 START === */
.faq-final-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.faq-final-heading {
  margin-bottom: 34px;
}

.faq-final-card {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(11, 37, 71, 0.12);
  border-radius: 28px;
  box-shadow: 0 18px 50px rgba(11, 37, 71, 0.07);
  overflow: hidden;
}

.faq-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: center;
  gap: 56px;
  padding: 42px 48px;
}

.faq-final-list {
  min-width: 0;
}

.faq-final-item {
  border-bottom: 1px solid rgba(11, 37, 71, 0.10);
}

.faq-final-item:first-child {
  border-top: 1px solid rgba(11, 37, 71, 0.10);
}

.faq-final-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;

  margin: 0;
  padding: 19px 42px 19px 0;

  color: #0B2547;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-final-item summary::-webkit-details-marker {
  display: none;
}

.faq-final-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;

  width: 28px;
  height: 28px;

  display: grid;
  place-items: center;

  transform: translateY(-50%);

  border: 1px solid rgba(11, 37, 71, 0.16);
  border-radius: 50%;

  color: #0B2547;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.faq-final-item[open] summary::after {
  content: "–";
}

.faq-final-answer {
  padding: 0 42px 20px 0;
}

.faq-final-answer p {
  margin: 0;
  max-width: 720px;

  color: #68778A;
  font-size: 15px;
  line-height: 1.65;
}

.faq-final-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.faq-final-visual img {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}

.faq-final-placeholder {
  width: min(100%, 340px);
  aspect-ratio: 1 / 0.86;

  display: grid;
  place-items: center;

  border: 1.5px dashed rgba(11, 37, 71, 0.18);
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(137, 190, 222, 0.10),
      transparent 62%
    );
}

.faq-final-placeholder span {
  color: #68778A;
  font-size: 13px;
  font-weight: 600;
}


/* Tablet */
@media (max-width: 900px) {

  .faq-final-shell {
    width: min(100% - 36px, 760px);
  }

  .faq-final-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 34px;
  }

  .faq-final-visual {
    order: 2;
  }

  .faq-final-visual img,
  .faq-final-placeholder {
    max-width: 320px;
  }
}


/* Smartphone */
@media (max-width: 680px) {

  .faq-final-shell {
    width: calc(100% - 28px);
  }

  .faq-final-heading {
    margin-bottom: 24px;
  }

  .faq-final-card {
    border-radius: 22px;
  }

  .faq-final-grid {
    gap: 28px;
    padding: 24px 20px 28px;
  }

  .faq-final-item summary {
    padding: 17px 38px 17px 0;
    font-size: 15.5px;
  }

  .faq-final-item summary::after {
    right: 0;
    width: 26px;
    height: 26px;
    font-size: 18px;
  }

  .faq-final-answer {
    padding: 0 34px 18px 0;
  }

  .faq-final-answer p {
    font-size: 14px;
    line-height: 1.6;
  }

  .faq-final-visual img,
  .faq-final-placeholder {
    width: min(100%, 270px);
  }
}


/* iPhone SE / sehr kleine Displays */
@media (max-width: 390px) {

  .faq-final-shell {
    width: calc(100% - 22px);
  }

  .faq-final-grid {
    padding: 21px 17px 25px;
  }

  .faq-final-item summary {
    font-size: 15px;
  }
}

/* === MAGLANO FINAL FAQ 2026-08-08 END === */

/* === MAGLANO FAQ COMPACT 2026-08-08 START === */

.faq-final-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

.faq-final-heading {
  margin-bottom: 26px;
}

.faq-final-card {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid rgba(11, 37, 71, 0.12);
  border-radius: 26px;
  box-shadow: 0 14px 42px rgba(11, 37, 71, 0.06);
}

.faq-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 46px;
  align-items: start;
  padding: 28px 38px 30px;
}

.faq-final-column {
  min-width: 0;
}

.faq-final-item {
  border-bottom: 1px solid rgba(11, 37, 71, 0.10);
}

.faq-final-column .faq-final-item:first-child {
  border-top: 1px solid rgba(11, 37, 71, 0.10);
}

.faq-final-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;

  margin: 0;
  padding: 15px 38px 15px 0;

  color: #0B2547;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.35;
}

.faq-final-item summary::-webkit-details-marker {
  display: none;
}

.faq-final-item summary::after {
  content: "+";

  position: absolute;
  top: 50%;
  right: 0;

  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;

  transform: translateY(-50%);

  border: 1px solid rgba(11, 37, 71, 0.16);
  border-radius: 50%;

  color: #0B2547;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.faq-final-item[open] summary::after {
  content: "–";
}

.faq-final-answer {
  padding: 0 34px 16px 0;
}

.faq-final-answer p {
  margin: 0;

  color: #68778A;
  font-size: 14px;
  line-height: 1.58;
}


/* Tablet */
@media (max-width: 820px) {

  .faq-final-shell {
    width: min(100% - 32px, 720px);
  }

  .faq-final-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 28px 26px;
  }

  .faq-final-column + .faq-final-column .faq-final-item:first-child {
    border-top: 0;
  }
}


/* Smartphone */
@media (max-width: 520px) {

  .faq-final-shell {
    width: calc(100% - 24px);
  }

  .faq-final-heading {
    margin-bottom: 20px;
  }

  .faq-final-card {
    border-radius: 20px;
  }

  .faq-final-grid {
    padding: 18px 18px 20px;
  }

  .faq-final-item summary {
    padding: 14px 34px 14px 0;
    font-size: 14.5px;
  }

  .faq-final-item summary::after {
    width: 24px;
    height: 24px;
    font-size: 17px;
  }

  .faq-final-answer {
    padding: 0 30px 14px 0;
  }

  .faq-final-answer p {
    font-size: 13.5px;
    line-height: 1.55;
  }
}

/* === MAGLANO FAQ COMPACT 2026-08-08 END === */

/* === MAGLANO STEP ILLUSTRATIONS FINAL 2026-08-08 START === */

/*
  Einheitliche Bildfläche für alle drei Schritt-Karten.
  Die transparenten WebP-Dateien bleiben vollständig sichtbar.
*/

.step-card .step-visual {
  width: 100%;
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 16px auto 18px;
  overflow: hidden;
}

.step-card .step-illustration {
  display: block;

  width: 100%;
  max-width: 285px;
  height: 100%;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;
}


/* Tablet */
@media (max-width: 900px) {

  .step-card .step-visual {
    height: 180px;
    margin-top: 14px;
    margin-bottom: 17px;
  }

  .step-card .step-illustration {
    max-width: 270px;
  }
}


/* Smartphone */
@media (max-width: 680px) {

  .step-card .step-visual {
    height: 175px;
    margin-top: 12px;
    margin-bottom: 16px;
  }

  .step-card .step-illustration {
    max-width: 280px;
  }
}


/* iPhone SE / sehr kleine Displays */
@media (max-width: 390px) {

  .step-card .step-visual {
    height: 160px;
    margin-top: 10px;
    margin-bottom: 14px;
  }

  .step-card .step-illustration {
    max-width: 250px;
  }
}

/* === MAGLANO STEP ILLUSTRATIONS FINAL 2026-08-08 END === */

/* === MAGLANO STEPS DENSE + ARROWS FINAL 2026-08-08 START === */

/*
  Ziel:
  - aktuelle Bildgrösse grundsätzlich beibehalten
  - Überschneidung zwischen Illustration und Text verhindern
  - Kachelgrösse nicht vergrössern
  - Pfeile beibehalten
*/

.steps-grid {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 56px;
}

.steps-grid .step-card {
  position: relative;
  min-height: 0 !important;

  display: flex;
  flex-direction: column;

  padding-top: 22px;
  padding-bottom: 20px;
}

.steps-grid .step-number {
  margin-bottom: 10px;
}

.steps-grid .step-card h3 {
  margin-top: 0;
  margin-bottom: 2px;
}

.steps-grid .step-card .step-visual {
  width: 100%;
  height: 126px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-top: -2px;
  margin-bottom: 10px;

  overflow: visible;
}

/*
  Bildgrösse bleibt gross,
  bekommt aber etwas mehr eigene vertikale Luft.
*/
.steps-grid .step-card .step-illustration {
  display: block;

  width: 126%;
  max-width: 330px;
  height: auto;
  max-height: none;

  object-fit: contain;
  object-position: center center;

  margin: 0 auto;

  transform: scale(1.12);
  transform-origin: center center;
}

.steps-grid .step-card > p {
  margin-top: 0 !important;
  margin-bottom: 0;
}

/*
  Dezente Ablaufpfeile zwischen den Karten.
*/
@media (min-width: 901px) {

  .steps-grid .step-card:nth-child(1)::after,
  .steps-grid .step-card:nth-child(2)::after {
    content: "→";

    position: absolute;
    z-index: 8;

    top: 50%;
    right: -30px;

    transform: translateY(-50%);

    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(11, 37, 71, 0.55);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;

    pointer-events: none;
  }
}

.audience-grid {
  margin-top: 6px;
}

/* Tablet */
@media (max-width: 1100px) and (min-width: 901px) {

  .steps-grid .step-card {
    padding-top: 21px;
    padding-bottom: 19px;
  }

  .steps-grid .step-card .step-visual {
    height: 122px;
    margin-bottom: 9px;
  }

  .steps-grid .step-card .step-illustration {
    width: 124%;
    max-width: 315px;
    transform: scale(1.10);
  }

  .steps-grid .step-card:nth-child(1)::after,
  .steps-grid .step-card:nth-child(2)::after {
    right: -26px;
    font-size: 22px;
  }
}

/* Unter 900 px keine Pfeile */
@media (max-width: 900px) {

  .steps-grid {
    margin-bottom: 48px;
  }

  .steps-grid .step-card::after {
    content: none !important;
  }

  .steps-grid .step-card {
    padding-top: 20px;
    padding-bottom: 18px;
  }

  .steps-grid .step-number {
    margin-bottom: 9px;
  }

  .steps-grid .step-card h3 {
    margin-bottom: 2px;
  }

  .steps-grid .step-card .step-visual {
    height: 118px;
    margin-bottom: 8px;
  }

  .steps-grid .step-card .step-illustration {
    width: 122%;
    max-width: 300px;
    transform: scale(1.08);
  }
}

/* Smartphone */
@media (max-width: 680px) {

  .steps-grid {
    margin-bottom: 42px;
  }

  .steps-grid .step-card {
    padding-top: 18px;
    padding-bottom: 17px;
  }

  .steps-grid .step-number {
    margin-bottom: 8px;
  }

  .steps-grid .step-card h3 {
    margin-bottom: 2px;
  }

  .steps-grid .step-card .step-visual {
    height: 108px;
    margin-bottom: 7px;
  }

  .steps-grid .step-card .step-illustration {
    width: 118%;
    max-width: 275px;
    transform: scale(1.04);
  }
}

/* iPhone SE / kleine Displays */
@media (max-width: 390px) {

  .steps-grid .step-card {
    padding-top: 17px;
    padding-bottom: 16px;
  }

  .steps-grid .step-card .step-visual {
    height: 100px;
    margin-bottom: 6px;
  }

  .steps-grid .step-card .step-illustration {
    width: 114%;
    max-width: 250px;
    transform: scale(1.00);
  }
}

/* === MAGLANO STEPS DENSE + ARROWS FINAL 2026-08-08 END === */

/* === MAGLANO STEP IMAGE TUNING 2026-08-08 START === */

/*
  Feintuning:
  - Bild 1 etwas nach oben und hinter die Textebene
  - Bild 3 minimal grösser
  - Kachelgrösse bleibt unverändert
*/

.steps-grid .step-card {
  position: relative;
}

.steps-grid .step-card .step-number,
.steps-grid .step-card h3,
.steps-grid .step-card > p {
  position: relative;
  z-index: 3;
}

.steps-grid .step-card .step-visual {
  position: relative;
  z-index: 1;
}


/* ---------------------------------------------------------
   STEP 1 – höher / stärker im Hintergrund
--------------------------------------------------------- */

.steps-grid .step-card:nth-child(1) .step-visual {
  margin-top: -4px;
  margin-bottom: 8px;
}

.steps-grid .step-card:nth-child(1) .step-illustration {
  transform: translateY(-22px) scale(1.03);
  transform-origin: center center;
}


/* ---------------------------------------------------------
   STEP 3 – minimal grösser
--------------------------------------------------------- */

.steps-grid .step-card:nth-child(3) .step-illustration {
  max-width: 342px;
  transform: scale(1.16);
  transform-origin: center center;
}


/* Tablet */
@media (max-width: 1100px) and (min-width: 901px) {

  .steps-grid .step-card:nth-child(1) .step-illustration {
    transform: translateY(-18px) scale(1.02);
  }

  .steps-grid .step-card:nth-child(3) .step-illustration {
    max-width: 326px;
    transform: scale(1.14);
  }
}


/* Unter 900 px */
@media (max-width: 900px) {

  .steps-grid .step-card:nth-child(1) .step-visual {
    margin-top: -3px;
    margin-bottom: 8px;
  }

  .steps-grid .step-card:nth-child(1) .step-illustration {
    transform: translateY(-16px) scale(1.01);
  }

  .steps-grid .step-card:nth-child(3) .step-illustration {
    max-width: 308px;
    transform: scale(1.11);
  }
}


/* Smartphone */
@media (max-width: 680px) {

  .steps-grid .step-card:nth-child(1) .step-illustration {
    transform: translateY(-10px) scale(1.00);
  }

  .steps-grid .step-card:nth-child(3) .step-illustration {
    max-width: 282px;
    transform: scale(1.07);
  }
}


/* iPhone SE */
@media (max-width: 390px) {

  .steps-grid .step-card:nth-child(1) .step-illustration {
    transform: translateY(-6px) scale(1.00);
  }

  .steps-grid .step-card:nth-child(3) .step-illustration {
    max-width: 255px;
    transform: scale(1.03);
  }
}

/* === MAGLANO STEP IMAGE TUNING 2026-08-08 END === */

/* === MAGLANO STEP ARROWS ONLY 2026-08-08 START === */

/*
  Pfeile nur zwischen den 3 Schritt-Karten.
  Nur auf Desktop / grösseren Tablets sichtbar.
*/

.steps-grid .step-card {
  position: relative;
}

@media (min-width: 901px) {

  .steps-grid .step-card:nth-child(1)::after,
  .steps-grid .step-card:nth-child(2)::after {
    content: "→";

    position: absolute;
    z-index: 20;

    top: 50%;
    right: -26px;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    color: rgba(11, 37, 71, 0.62);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;

    pointer-events: none;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {

  .steps-grid .step-card:nth-child(1)::after,
  .steps-grid .step-card:nth-child(2)::after {
    right: -22px;
    font-size: 22px;
  }
}

@media (max-width: 900px) {

  .steps-grid .step-card::after {
    content: none !important;
  }
}

/* === MAGLANO STEP ARROWS ONLY 2026-08-08 END === */

/* === MAGLANO AUDIENCE FINAL REPAIR 2026-08-08 START === */

/*
  Zwei gleichwertige Karten.
  Aufbau:
  Titel → Illustration → Einleitung → Vorteile
*/

.audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 28px;

  align-items: stretch;
}

.audience-grid .audience-card {
  display: flex !important;
  flex-direction: column;

  min-width: 0;

  padding: 30px 34px 32px;
}

.audience-grid .audience-card h3 {
  margin: 0 0 4px;
}


/* Illustration */

.audience-inline-visual {
  width: 100%;
  height: 190px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 2px auto 10px;

  overflow: visible;
}

.audience-inline-illustration {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;
}


/*
  Klemmbrett – etwas kompakter,
  weil das Motiv hochkant ist.
*/
.audience-inline-illustration--auftraggeber {
  max-width: 310px;
}


/*
  Fahrer-Motiv breiter.
*/
.audience-inline-illustration--fahrer {
  max-width: 390px;
}


/* Text */

.audience-grid .audience-intro {
  margin: 0;

  color: #68778A;
}


/* Vorteile */

.audience-grid .audience-list {
  margin-top: 22px;
  margin-bottom: 0;
}


/* Tablet */

@media (max-width: 900px) {

  .audience-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .audience-grid .audience-card {
    padding: 28px 30px 30px;
  }

  .audience-inline-visual {
    height: 180px;
  }

}


/* Smartphone */

@media (max-width: 680px) {

  .audience-grid {
    gap: 22px;
  }

  .audience-grid .audience-card {
    padding: 24px 22px 26px;
  }

  .audience-inline-visual {
    height: 160px;
    margin-bottom: 9px;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 270px;
  }

  .audience-inline-illustration--fahrer {
    max-width: 330px;
  }

  .audience-grid .audience-list {
    margin-top: 18px;
  }

}


/* iPhone SE */

@media (max-width: 390px) {

  .audience-inline-visual {
    height: 145px;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 240px;
  }

  .audience-inline-illustration--fahrer {
    max-width: 290px;
  }

}

/* === MAGLANO AUDIENCE FINAL REPAIR 2026-08-08 END === */

/* === MAGLANO AUDIENCE SIZE + VERTICAL RHYTHM 2026-08-08 START === */

/*
  Einheitlicher vertikaler Rhythmus zwischen den grossen Kartengruppen.

  Desktop:
  Schritte
      ↓ 56px
  Auftraggeber / Fahrer
      ↓ 56px
  Nutzen
      ↓ 56px
  FAQ
*/

.steps-grid {
  margin-bottom: 56px !important;
}

.audience-grid {
  margin-top: 0 !important;
  margin-bottom: 56px !important;
}

.impact-card {
  margin-top: 0 !important;
  margin-bottom: 56px !important;
}


/* ---------------------------------------------------------
   AUFTRAGGEBER / FAHRER – ILLUSTRATIONEN GRÖSSER
--------------------------------------------------------- */

/*
  Mehr Bildfläche, ohne die Kartenbreite zu verändern.
*/
.audience-inline-visual {
  height: 235px !important;

  margin-top: 0 !important;
  margin-bottom: 10px !important;

  overflow: visible !important;
}


/*
  Auftraggeber:
  Hochformat-Motiv ca. 30 % grösser.
*/
.audience-inline-illustration--auftraggeber {
  max-width: 395px !important;
  transform: scale(1.06);
  transform-origin: center center;
}


/*
  Fahrer:
  Das breite Motiv darf stärker in die verfügbare
  Kartenbreite gehen.
*/
.audience-inline-illustration--fahrer {
  max-width: 490px !important;
  transform: scale(1.05);
  transform-origin: center center;
}


/*
  Text bleibt sauber unter dem Bild.
*/
.audience-grid .audience-intro {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .steps-grid,
  .audience-grid,
  .impact-card {
    margin-bottom: 44px !important;
  }

  .audience-inline-visual {
    height: 215px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 355px !important;
    transform: scale(1.04);
  }

  .audience-inline-illustration--fahrer {
    max-width: 445px !important;
    transform: scale(1.03);
  }
}


/* ---------------------------------------------------------
   SMARTPHONE
--------------------------------------------------------- */

@media (max-width: 680px) {

  .steps-grid,
  .audience-grid,
  .impact-card {
    margin-bottom: 36px !important;
  }

  .audience-inline-visual {
    height: 190px !important;
    margin-bottom: 8px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 310px !important;
    transform: scale(1.02);
  }

  .audience-inline-illustration--fahrer {
    max-width: 380px !important;
    transform: scale(1.01);
  }
}


/* ---------------------------------------------------------
   IPHONE SE / KLEINE DISPLAYS
--------------------------------------------------------- */

@media (max-width: 390px) {

  .steps-grid,
  .audience-grid,
  .impact-card {
    margin-bottom: 32px !important;
  }

  .audience-inline-visual {
    height: 170px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 275px !important;
    transform: none;
  }

  .audience-inline-illustration--fahrer {
    max-width: 330px !important;
    transform: none;
  }
}

/* === MAGLANO AUDIENCE SIZE + VERTICAL RHYTHM 2026-08-08 END === */

/* === MAGLANO AUDIENCE DRIVER TIGHTEN 2026-08-08 START === */

/*
  Ziel:
  - weniger Weissraum zwischen Titel, Bild und Text
  - Fahrer-Bild nochmals grösser
  - Kachelgrösse und Gesamtstruktur bleiben erhalten
*/

/* Titel etwas näher an die Illustration */
.audience-grid .audience-card h3 {
  margin-bottom: 2px !important;
}

/* Bildbereich kompakter und näher am Text */
.audience-inline-visual {
  height: 185px !important;
  margin-top: 2px !important;
  margin-bottom: 4px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: visible !important;
}

/* Beschreibung direkt unter der Illustration */
.audience-grid .audience-intro {
  margin-top: 0 !important;
}

/* Auftraggeber leicht grösser, aber zurückhaltend */
.audience-inline-illustration--auftraggeber {
  max-width: 365px !important;
  transform: scale(1.02);
  transform-origin: center center;
}

/* Fahrer sichtbar grösser */
.audience-inline-illustration--fahrer {
  max-width: 560px !important;
  transform: scale(1.10);
  transform-origin: center center;
}

/* Liste etwas näher an den Fliesstext */
.audience-grid .audience-list {
  margin-top: 18px !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */
@media (max-width: 1000px) {

  .audience-inline-visual {
    height: 172px !important;
    margin-bottom: 4px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 335px !important;
    transform: scale(1.01);
  }

  .audience-inline-illustration--fahrer {
    max-width: 500px !important;
    transform: scale(1.07);
  }

  .audience-grid .audience-list {
    margin-top: 16px !important;
  }
}


/* ---------------------------------------------------------
   SMARTPHONE
--------------------------------------------------------- */
@media (max-width: 680px) {

  .audience-inline-visual {
    height: 155px !important;
    margin-top: 2px !important;
    margin-bottom: 3px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 285px !important;
    transform: none;
  }

  .audience-inline-illustration--fahrer {
    max-width: 395px !important;
    transform: none;
  }

  .audience-grid .audience-list {
    margin-top: 15px !important;
  }
}


/* ---------------------------------------------------------
   IPHONE SE / KLEINE DISPLAYS
--------------------------------------------------------- */
@media (max-width: 390px) {

  .audience-inline-visual {
    height: 142px !important;
    margin-bottom: 3px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 250px !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 330px !important;
  }

  .audience-grid .audience-list {
    margin-top: 14px !important;
  }
}

/* === MAGLANO AUDIENCE DRIVER TIGHTEN 2026-08-08 END === */

/* === MAGLANO AUDIENCE COMPACT LARGE 2026-08-08 START === */

/*
  Ziel:
  - Kacheln kompakter
  - freie Innenräume reduzieren
  - Bilder deutlich grösser
  - Wirkung näher an der 3er-Reihe
*/

/* ---------------------------------------------------------
   2er-Gruppe allgemein
--------------------------------------------------------- */

.audience-grid {
  gap: 26px !important;
}

.audience-grid .audience-card {
  padding: 24px 28px 24px !important;
  min-height: auto !important;
}


/* ---------------------------------------------------------
   Titel
--------------------------------------------------------- */

.audience-grid .audience-card h3 {
  margin: 0 0 2px !important;
}


/* ---------------------------------------------------------
   Bildbereich kompakter und grösser
--------------------------------------------------------- */

.audience-inline-visual {
  height: 138px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 2px !important;

  overflow: visible !important;
}

/*
  Auftraggeber:
  grösser, ähnlich prominent wie Schrittbilder
*/
.audience-inline-illustration--auftraggeber {
  max-width: 410px !important;
  transform: scale(1.22) !important;
  transform-origin: center center !important;
}

/*
  Fahrer:
  noch etwas grösser als Auftraggeber,
  weil das Motiv breiter ist.
*/
.audience-inline-illustration--fahrer {
  max-width: 560px !important;
  transform: scale(1.24) !important;
  transform-origin: center center !important;
}


/* ---------------------------------------------------------
   Beschreibung enger ans Bild
--------------------------------------------------------- */

.audience-grid .audience-intro {
  margin: 0 !important;
  line-height: 1.5 !important;
}


/* ---------------------------------------------------------
   Liste näher an den Text
--------------------------------------------------------- */

.audience-grid .audience-list {
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

.audience-grid .audience-list li + li {
  margin-top: 6px !important;
}


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1000px) {

  .audience-grid .audience-card {
    padding: 22px 24px 22px !important;
  }

  .audience-inline-visual {
    height: 128px !important;
    margin-bottom: 2px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 365px !important;
    transform: scale(1.16) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 500px !important;
    transform: scale(1.18) !important;
  }

  .audience-grid .audience-list {
    margin-top: 13px !important;
  }
}


/* ---------------------------------------------------------
   Smartphone
--------------------------------------------------------- */

@media (max-width: 680px) {

  .audience-grid {
    gap: 22px !important;
  }

  .audience-grid .audience-card {
    padding: 20px 18px 22px !important;
  }

  .audience-inline-visual {
    height: 116px !important;
    margin-bottom: 2px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 300px !important;
    transform: scale(1.10) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 410px !important;
    transform: scale(1.10) !important;
  }

  .audience-grid .audience-list {
    margin-top: 12px !important;
  }

  .audience-grid .audience-list li + li {
    margin-top: 5px !important;
  }
}


/* ---------------------------------------------------------
   iPhone SE / kleine Displays
--------------------------------------------------------- */

@media (max-width: 390px) {

  .audience-grid .audience-card {
    padding: 18px 16px 20px !important;
  }

  .audience-inline-visual {
    height: 106px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 260px !important;
    transform: scale(1.04) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 350px !important;
    transform: scale(1.04) !important;
  }

  .audience-grid .audience-list {
    margin-top: 11px !important;
  }
}

/* === MAGLANO AUDIENCE COMPACT LARGE 2026-08-08 END === */

/* === MAGLANO AUDIENCE IMAGES REALLY BIG 2026-08-08 START === */

/*
  Sweet Spot:
  - deutlich grösser als die ursprüngliche Version
  - etwas kleiner als die letzte Variante
  - kompakte Innenabstände bleiben erhalten
*/

.audience-grid .audience-card {
  padding: 22px 26px 22px !important;
}

.audience-grid .audience-card h3 {
  margin: 0 0 2px !important;
}

.audience-inline-visual {
  height: 120px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto 0 !important;
  overflow: visible !important;
}

.audience-inline-illustration {
  display: block !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 auto !important;
}


/*
  Auftraggeber:
  ca. 10–12 % kleiner als zuletzt.
*/
.audience-inline-illustration--auftraggeber {
  max-width: 440px !important;
  width: 78% !important;

  transform: scale(1.24) !important;
  transform-origin: center center !important;
}


/*
  Fahrer:
  ebenfalls zurücknehmen,
  bleibt aber etwas präsenter als Auftraggeber.
*/
.audience-inline-illustration--fahrer {
  max-width: 570px !important;
  width: 88% !important;

  transform: scale(1.35) !important;
  transform-origin: center center !important;
}


.audience-grid .audience-intro {
  margin-top: 2px !important;
  line-height: 1.48 !important;
}

.audience-grid .audience-list {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

.audience-grid .audience-list li + li {
  margin-top: 5px !important;
}


/* Tablet */
@media (max-width: 1000px) {

  .audience-inline-visual {
    height: 110px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 400px !important;
    width: 77% !important;
    transform: scale(1.17) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 520px !important;
    width: 87% !important;
    transform: scale(1.24) !important;
  }
}


/* Smartphone */
@media (max-width: 680px) {

  .audience-grid .audience-card {
    padding: 20px 18px 20px !important;
  }

  .audience-inline-visual {
    height: 100px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 325px !important;
    width: 82% !important;
    transform: scale(1.03) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 405px !important;
    width: 92% !important;
    transform: scale(0.94) !important;
  }

  .audience-grid .audience-list {
    margin-top: 11px !important;
  }
}


/* iPhone SE */
@media (max-width: 390px) {

  .audience-inline-visual {
    height: 92px !important;
  }

  .audience-inline-illustration--auftraggeber {
    max-width: 275px !important;
    width: 82% !important;
    transform: scale(1.04) !important;
  }

  .audience-inline-illustration--fahrer {
    max-width: 340px !important;
    width: 92% !important;
    transform: scale(0.95) !important;
  }
}

/* === MAGLANO AUDIENCE IMAGES REALLY BIG 2026-08-08 END === */

/* === MAGLANO IMPACT PASSENDE WEGE 2026-08-08 START === */

/*
  Nutzen-Kachel:
  Bild bewusst ca. 20 % kleiner als vorher.
  Text links / Illustration rechts.
*/

.impact-card {
  display: grid !important;
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr) !important;

  gap: 30px !important;
  align-items: center !important;

  padding: 28px 34px !important;

  overflow: hidden;
}

.impact-card > :not(.impact-visual) {
  min-width: 0;
}


/* Bildbereich */

.impact-visual {
  width: 100%;
  height: 198px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  overflow: visible;
}

.impact-illustration {
  display: block;

  width: 100%;
  max-width: 560px;
  height: auto;

  object-fit: contain;
  object-position: center;

  margin: 0 auto;

  transform: none;
  transform-origin: center center;
}


/* Tablet */

@media (max-width: 1000px) {

  .impact-card {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr) !important;
    gap: 22px !important;
    padding: 26px 28px !important;
  }

  .impact-visual {
    height: 182px;
  }

  .impact-illustration {
    width: 98%;
    max-width: 510px;
    transform: none;
  }
}


/* Auf schmaleren Geräten Bild unter dem Text */

@media (max-width: 760px) {

  .impact-card {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 24px 22px !important;
  }

  .impact-visual {
    height: 168px;
    margin-top: 2px;
  }

  .impact-illustration {
    width: 96%;
    max-width: 460px;
    transform: none;
  }
}


/* Smartphone */

@media (max-width: 520px) {

  .impact-card {
    gap: 10px !important;
    padding: 22px 18px !important;
  }

  .impact-visual {
    height: 148px;
  }

  .impact-illustration {
    width: 94%;
    max-width: 390px;
  }
}


/* iPhone SE */

@media (max-width: 390px) {

  .impact-card {
    padding: 20px 16px !important;
  }

  .impact-visual {
    height: 132px;
  }

  .impact-illustration {
    width: 92%;
    max-width: 340px;
  }
}

/* === MAGLANO IMPACT PASSENDE WEGE 2026-08-08 END === */

/* === MAGLANO IMPACT FINAL CLEANUP 2026-08-08 START === */

/*
  Passende Wege – finaler Feinschliff:
  - keine unnötige Mindesthöhe
  - weniger Leerraum
  - Bild etwas tiefer
  - aktuelle Bildgrösse bleibt erhalten
*/

.impact-card {
  min-height: 0 !important;
  height: auto !important;

  padding: 24px 34px !important;

  align-items: center !important;
}


/*
  Alte Höhenvorgaben der Basisstruktur neutralisieren.
*/
.impact-card,
.impact-card > * {
  min-height: 0 !important;
}


/*
  Bildgrösse unverändert.
  Nur vertikal etwas nach unten setzen.
*/
.impact-visual {
  height: 198px !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  transform: translateY(18px);
}


/*
  Textblock ebenfalls ohne künstliche Höhe.
*/
.impact-copy {
  min-height: 0 !important;
  height: auto !important;
}


/* Tablet */
@media (max-width: 1000px) {

  .impact-card {
    padding: 22px 28px !important;
  }

  .impact-visual {
    height: 182px !important;
    transform: translateY(14px);
  }
}


/* Mobil */
@media (max-width: 760px) {

  .impact-card {
    padding: 22px !important;
  }

  .impact-visual {
    transform: none;
    margin-top: 4px !important;
  }
}


/* Smartphone */
@media (max-width: 520px) {

  .impact-card {
    padding: 20px 18px !important;
  }
}

/* === MAGLANO IMPACT FINAL CLEANUP 2026-08-08 END === */

/* === MAGLANO IMPACT IMAGE PLUS10 2026-08-08 START === */

/*
  Passende Wege:
  Nutzen-Bild nochmals ca. 10 % grösser.
  Kachelstruktur bleibt unverändert.
*/

.impact-illustration {
  width: 110% !important;
  max-width: 616px !important;
  height: auto !important;
}

@media (max-width: 1000px) {
  .impact-illustration {
    width: 108% !important;
    max-width: 561px !important;
  }
}

@media (max-width: 760px) {
  .impact-illustration {
    width: 104% !important;
    max-width: 506px !important;
  }
}

@media (max-width: 520px) {
  .impact-illustration {
    width: 103% !important;
    max-width: 429px !important;
  }
}

@media (max-width: 390px) {
  .impact-illustration {
    width: 101% !important;
    max-width: 374px !important;
  }
}

/* === MAGLANO IMPACT IMAGE PLUS10 2026-08-08 END === */

/* === MAGLANO AUDIENCE SECTION HEADING 2026-08-08 START === */

/*
  Neuer Zwischentitel vor Auftraggeber / Fahrer.
  Etwas kleiner als "So einfach funktioniert’s",
  damit die Seitenhierarchie klar bleibt.
*/

.audience-section-heading {
  width: 100%;
  max-width: 900px;

  margin: 0 auto 28px;

  text-align: center;
}

.audience-section-heading h2 {
  margin: 0;

  color: #0B2547;

  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.025em;
}

.audience-section-heading p {
  margin: 10px 0 0;

  color: #68778A;

  font-size: clamp(1rem, 1.55vw, 1.28rem);
  line-height: 1.45;
}


/*
  Der vorherige Abstand der 3er-Gruppe wird etwas reduziert,
  weil jetzt die neue Überschrift darin Platz findet.
  So bleibt der Gesamtbereich kompakt.
*/

.steps-grid {
  margin-bottom: 34px !important;
}


/* Abstand Überschrift → Auftraggeber/Fahrer */

.audience-grid {
  margin-top: 0 !important;
}


/* Tablet */

@media (max-width: 900px) {

  .audience-section-heading {
    margin-bottom: 24px;
  }

  .steps-grid {
    margin-bottom: 30px !important;
  }
}


/* Smartphone */

@media (max-width: 680px) {

  .audience-section-heading {
    max-width: 560px;
    margin-bottom: 22px;
    padding: 0 8px;
  }

  .audience-section-heading p {
    margin-top: 8px;
  }

  .steps-grid {
    margin-bottom: 28px !important;
  }
}


/* iPhone SE */

@media (max-width: 390px) {

  .audience-section-heading {
    margin-bottom: 20px;
  }

  .steps-grid {
    margin-bottom: 26px !important;
  }
}

/* === MAGLANO AUDIENCE SECTION HEADING 2026-08-08 END === */