/* Leistungen-Fusion (Entwurf 18.10.2026)
   Look = Live-Stand (Satoshi-Metallic, große Nummern mit Blau-Punkt, graue Karten, blaues Plus)
   Anordnung = taste-minimalist (Label links / H2 rechts, Zeile: Nr · Titel · Nutzen+Chips · Plus)
   Nur Desktop/Tablet ≥ 900 px — darunter bleibt das bestehende Handy-Layout. */

@media (min-width:900px){
  /* Kopf: Label links oben, H2 rechts */
  #leistungen .sub-title{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
    align-items:start;text-align:left;gap:0 40px;
    max-width:none;margin:0 0 64px
  }
  #leistungen .sub-title .tag{justify-self:start;margin-top:14px}
  #leistungen .sub-title h2{justify-self:end;text-align:left;margin:0}
  #leistungen .sub-title h2 .mute{display:block}

  /* Zeile: Nr | Titel | Nutzen + Chips | Plus */
  #leistungen .service-list .acc-head{
    grid-template-columns:116px minmax(0,1fr) minmax(0,1.2fr) 44px;
    grid-template-rows:auto auto;
    gap:10px 28px;
    padding:26px 32px 26px 32px!important;
    min-height:0;align-items:center
  }
  #leistungen .s-main{display:contents}
  #leistungen .s-no{
    grid-column:1;grid-row:1/3;align-self:center;
    font-size:72px;line-height:72px;letter-spacing:-.07em
  }
  #leistungen .s-title{
    grid-column:2;grid-row:1/3;align-self:center;
    font-size:clamp(26px,2.2vw,32px);line-height:1.12;white-space:nowrap
  }
  #leistungen .s-benefit{
    grid-column:3;grid-row:1;align-self:end;
    font-size:17px;line-height:1.4;margin:0;max-width:none
  }
  #leistungen .chips{grid-column:3;grid-row:2;align-self:start}
  #leistungen .chips i{font-size:14px;padding:7px 12px}
  #leistungen .service-list .s-plus{
    grid-column:4;grid-row:1/3;align-self:center;justify-self:end;
    width:44px!important;height:44px!important
  }
  #leistungen .service-list .s-plus svg{width:44px!important;height:44px!important}

  /* Sektion etwas breiter als der Rest, damit Titel + Nutzen einzeilig bleiben */
}
@media (min-width:1360px){#leistungen .container{max-width:1320px}}
@media (min-width:900px){
  /* Aufgeklappter Inhalt startet unter dem Titel */
  #leistungen .service-list .acc-body>div{padding:0 32px 0 calc(32px + 116px + 28px)}
}

@media (min-width:900px) and (max-width:1100px){
  #leistungen .service-list .acc-head{grid-template-columns:92px minmax(0,1fr) minmax(0,1.3fr) 36px;gap:8px 22px;padding:22px 24px!important}
  #leistungen .s-no{font-size:54px;line-height:54px}
  #leistungen .s-title{font-size:24px;white-space:normal}
  #leistungen .service-list .s-plus,#leistungen .service-list .s-plus svg{width:36px!important;height:36px!important}
  #leistungen .service-list .acc-body>div{padding-left:calc(24px + 92px + 22px)}
}