/* Zarexo V32 – erzwungenes Mobile-Layout */
@media screen and (max-width: 700px) {
  .platform-showcase {
    display: block !important;
    width: calc(100% - 20px) !important;
    max-width: none !important;
    margin: 36px auto 64px !important;
    padding: 20px 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .platform-showcase-inner {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .platform-intro,
  .platform-intro-centered {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 20px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .platform-intro h2 {
    display: block !important;
    width: 100% !important;
    max-width: 18ch !important;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    font-size: 1.65rem !important;
    line-height: 1.18 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .platform-intro p {
    width: 100% !important;
    max-width: 31ch !important;
    margin: 0 auto !important;
    font-size: .93rem !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  .platform-card-grid {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
  }

  .platform-card-grid > .platform-card {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 86px !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 14px !important;
    text-align: left !important;
  }

  .platform-card .platform-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin: 0 !important;
  }

  .platform-card > div:last-child {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .platform-card strong,
  .platform-card span {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  .platform-card strong {
    margin: 0 0 4px !important;
    font-size: 1.05rem !important;
  }

  .platform-card span {
    margin: 0 !important;
    font-size: .86rem !important;
    line-height: 1.42 !important;
  }
}

@media screen and (min-width: 701px) and (max-width: 1024px) {
  .platform-card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}


/* V33 – Smartphone-Regeln greifen jetzt bis 900px */
@media screen and (max-width: 900px) {
  .platform-showcase {
    display:block !important;
    width:calc(100% - 24px) !important;
    max-width:760px !important;
    margin:36px auto 64px !important;
    padding:22px 16px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  .platform-showcase-inner {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .platform-intro,
  .platform-intro-centered {
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 0 22px !important;
    padding:0 4px !important;
    text-align:center !important;
  }

  .platform-intro h2 {
    width:100% !important;
    max-width:22ch !important;
    margin:0 auto 10px !important;
    font-size:clamp(1.5rem,5.5vw,2rem) !important;
    line-height:1.18 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .platform-intro p {
    width:100% !important;
    max-width:34ch !important;
    margin:0 auto !important;
    font-size:.93rem !important;
    line-height:1.5 !important;
    text-align:center !important;
  }

  .platform-card-grid {
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    gap:12px !important;
  }

  .platform-card-grid > .platform-card {
    display:grid !important;
    grid-template-columns:52px minmax(0,1fr) !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:90px !important;
    margin:0 !important;
    padding:16px 18px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:15px !important;
    text-align:left !important;
  }

  .platform-card .platform-icon {
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
  }

  .platform-card > div:last-child {
    width:100% !important;
    min-width:0 !important;
  }

  .platform-card strong {
    display:block !important;
    margin:0 0 4px !important;
    font-size:1.08rem !important;
    line-height:1.25 !important;
  }

  .platform-card span {
    display:block !important;
    width:100% !important;
    margin:0 !important;
    font-size:.88rem !important;
    line-height:1.42 !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }

  .hero-copy {
    max-width:32ch !important;
    margin-left:auto !important;
    margin-right:auto !important;
    text-align:center !important;
  }

  .hero-actions {
    width:100% !important;
    max-width:760px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media screen and (max-width: 480px) {
  .platform-showcase {
    width:calc(100% - 18px) !important;
    padding:18px 12px !important;
  }

  .platform-card-grid > .platform-card {
    grid-template-columns:46px minmax(0,1fr) !important;
    min-height:84px !important;
    padding:14px !important;
    gap:12px !important;
  }

  .platform-card .platform-icon {
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
  }
}


/* =========================================================
   V34 – FIX FÜR DEN TATSÄCHLICH SICHTBAREN PLATTFORMBLOCK
   ========================================================= */

/* Desktop */
.hero .platform-showcase{
  width:100%;
  max-width:980px;
  margin:42px auto 0;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}

.hero .platform-label{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
}

.hero .platform-list{
  width:100%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}

.hero .platform-pill{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 14px;
  box-sizing:border-box;
  text-align:center;
}

.hero .platform-pill i{
  flex:0 0 auto;
}

/* Tablet */
@media screen and (min-width:701px) and (max-width:1024px){
  .hero .platform-showcase{
    max-width:760px !important;
    padding:22px !important;
  }

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

/* Smartphone */
@media screen and (max-width:700px){
  .hero .platform-showcase{
    width:calc(100% - 20px) !important;
    max-width:none !important;
    margin:34px auto 0 !important;
    padding:20px 14px !important;
    border-radius:22px !important;
    display:block !important;
  }

  .hero .platform-label{
    width:100% !important;
    margin:0 0 18px !important;
    padding:0 4px !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:10px !important;
    text-align:center !important;
  }

  .hero .platform-label strong{
    display:block !important;
    max-width:24ch !important;
    font-size:1.02rem !important;
    line-height:1.4 !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .hero .platform-label .pulse{
    margin-top:5px !important;
    flex:0 0 auto !important;
  }

  .hero .platform-list{
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .hero .platform-pill{
    width:100% !important;
    min-height:74px !important;
    margin:0 !important;
    padding:14px 16px !important;
    display:grid !important;
    grid-template-columns:46px minmax(0,1fr) !important;
    align-items:center !important;
    justify-content:stretch !important;
    gap:14px !important;
    box-sizing:border-box !important;
    text-align:left !important;
    font-size:1rem !important;
  }

  .hero .platform-pill i{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    display:grid !important;
    place-items:center !important;
    margin:0 !important;
  }
}

@media screen and (max-width:430px){
  .hero .platform-showcase{
    width:calc(100% - 16px) !important;
    padding:18px 12px !important;
  }

  .hero .platform-pill{
    grid-template-columns:42px minmax(0,1fr) !important;
    min-height:68px !important;
    padding:12px 14px !important;
    gap:12px !important;
  }

  .hero .platform-pill i{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
  }
}