/* Sections-Fusion (Entwurf 18.10.2026) — gleiches Prinzip wie leistungen-fusion.css
   Look = Live-Stand, Anordnung = taste-minimalist. Nur ≥900 px, Handy bleibt wie live.
   Betrifft: Beispiele, Ablauf & Preise, Wer das baut, FAQ, Kontakt. */

@media (min-width:900px){
  /* ── Kopf: Label links, H2 rechts (alle Sektionen mit .sub-title) ── */
  #beispiele .sub-title,#preise .sub-title,#faq .sub-title,#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
  }
  #beispiele .sub-title .tag,#preise .sub-title .tag,#faq .sub-title .tag,#leistungen .sub-title .tag{justify-self:start;margin-top:14px}
  #beispiele .sub-title h2,#preise .sub-title h2,#faq .sub-title h2,#leistungen .sub-title h2{justify-self:start;text-align:left;margin:0}
  #beispiele .sub-title h2 .mute,#preise .sub-title h2 .mute,#faq .sub-title h2 .mute{display:block}

  /* ── Ablauf & Preise: Eckdaten linksbündig über die volle Breite ── */
  #preise .tl{max-width:none;margin:0 24px 56px 0} /* 24px Luft rechts: Akzentlinie biegt exakt in die Pro-Karten-Kante */
  #preise .tl-step{text-align:left;padding-top:76px}
  #preise .tl-dot{left:0;transform:none}
  #preise .tl::before{left:28px}

  /* ── FAQ: Liste in der rechten Spalte, bündig unter der H2 ── */
  #faq .faq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);column-gap:40px}
  #faq .faq-list{grid-column:2}
}

@media (min-width:1101px){
  /* ── Beispiele: Satz + Vorher/Nachher als Gruppe, vertikal mittig, linksbündig ── */
  #beispiele .wc-info{justify-content:center;gap:28px}
  #beispiele .wc-info .wc-bx-hint.wc-bx-btn{margin:0;align-self:flex-start}

  /* ── Wer das baut: Foto größer, Text kompakter daneben ── */
  #warum .fd-grid{grid-template-columns:minmax(0,6fr) minmax(0,7fr)}
  #warum .fd-text h2{font-size:clamp(40px,3.7vw,56px)}
  #warum .fd-lead{font-size:clamp(18px,1.4vw,21px);max-width:34em}

  /* ── Kontakt: Person kompakt links (mitlaufend), Formular breiter rechts ── */
  #entwurf .contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);align-items:start}
  #entwurf .contact-card{min-height:0}
  #entwurf .contact-card.cc-person{position:sticky;top:112px;justify-content:flex-start;gap:28px}
  #entwurf .contact-card .cc-top{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px}
  #entwurf .contact-card .cc-avatar{width:72px;height:72px}
  #entwurf .contact-card .cc-quote{font-size:clamp(22px,1.9vw,28px)}
  #entwurf .contact-card .cc-mail{text-align:left;align-self:flex-start}
}

/* Gleiches Raster wie Leistungen: alle Fusions-Sektionen 1320 px breit */
@media (min-width:1360px){#beispiele .container,#preise .container,#warum .container,#faq .container,#entwurf .container{max-width:1320px}
  #preise .promo,#preise .price-grid,#preise .price-grid.pv-cards,#preise .price-trust,#preise .extras,#preise .price-pay{max-width:none}}

/* ── Handy/Tablet (≤899 px): gleiche Anordnung wie rechts, gestapelt ── */
@media (max-width:899px){
  /* Köpfe linksbündig: Label über H2 */
  #leistungen .sub-title,#beispiele .sub-title,#preise .sub-title,#faq .sub-title{
    align-items:flex-start;text-align:left;max-width:none;margin:0 0 32px;gap:12px}
  #leistungen .sub-title h2 .mute,#beispiele .sub-title h2 .mute,#preise .sub-title h2 .mute,#faq .sub-title h2 .mute{display:block}

  /* Leistungen: kleine Nummer neben dem Titel, Plus rechts; Nutzen + Pills darunter */
  #leistungen .service-list .acc-head{
    grid-template-columns:auto minmax(0,1fr) 28px!important;grid-template-areas:none!important;
    gap:10px 12px!important;padding:18px!important;align-items:center}
  #leistungen .s-main{display:contents}
  #leistungen .s-no{grid-area:auto;grid-column:1;grid-row:1;font-size:22px!important;line-height:1!important;letter-spacing:-.03em;padding:0!important;margin:0!important}
  #leistungen .s-title{grid-column:2;grid-row:1;white-space:normal}
  #leistungen .service-list .s-plus{grid-area:auto;grid-column:3;grid-row:1;justify-self:end}
  #leistungen .s-benefit{grid-column:1/-1;grid-row:2;margin:4px 0 0;max-width:none}
  #leistungen .chips{grid-column:1/-1;grid-row:3}
  #leistungen .service-list .acc-body>div{padding:0 18px}

  /* Beispiele: Satz + Vorher/Nachher linksbündig */
  #beispiele .wc-info{text-align:left;align-items:flex-start}
  #beispiele .wc-sentence{margin:0;max-width:none}
  #beispiele .wc-info .wc-bx-hint.wc-bx-btn{align-self:flex-start}

  /* Preise: Anzahlungs-Hinweis linksbündig wie der Rest */
  #preise .price-pay{text-align:left}

  /* Kontakt: kleines Foto neben dem Namen, alles linksbündig */
  #entwurf .contact-card{min-height:0}
  #entwurf .contact-card.cc-person{justify-content:flex-start;gap:24px}
  #entwurf .contact-card .cc-top{flex-direction:row;justify-content:flex-start;text-align:left;gap:14px}
  #entwurf .contact-card .cc-avatar{width:60px;height:60px}
  #entwurf .contact-card .cc-mail{text-align:left;align-self:flex-start}
}