/* ============================================================
   "UNSERE PHILOSOPHIE" (.phx) – responsiver Neuaufbau
   Desktop ≥1100px bleibt unberührt. Darunter echtes Grid,
   height:auto, kein transform:scale(), kein zoom.
   ============================================================ */

.phx .resp-only{display:none !important;}

@media (max-width:1099.98px){

  html body .phx-wrap{width:100% !important;left:0 !important;transform:none !important;}

  html body .phx{
    aspect-ratio:auto !important;
    height:auto !important;min-height:0 !important;
    width:100% !important;
    background-image:none !important;
    background-color:#F7F4EC !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    display:grid !important;
    grid-template-columns:repeat(6, minmax(0,1fr));
    align-content:start;
  }

  html body .phx > *{
    position:static !important;
    left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
    transform:none !important;
    white-space:normal !important;
    width:auto !important;min-width:0 !important;max-width:100% !important;
    margin:0;
  }
  html body .phx .resp-only{display:block !important;}

  html body .phx .phx-lead br,
  html body .phx .phx-cd br,
  html body .phx .phx-cta br{display:none !important;}

  /* ---------- Typografie ---------- */
  html body .phx .phx-kicker{
    font-size:13px !important;letter-spacing:3.2px !important;
    text-transform:uppercase;font-weight:500;color:#b08d3e !important;
  }
  html body .phx h2.phx-title{
    font-family:'Cormorant Garamond',serif !important;font-weight:600 !important;
    font-size:clamp(30px,5vw,46px) !important;line-height:1.2 !important;
    color:#123d1d !important;margin-top:10px;
  }
  html body .phx h2.phx-title em{font-size:.95em !important;line-height:1.2 !important;}
  html body .phx .phx-lead{
    font-size:clamp(15.5px,1.9vw,17px) !important;line-height:1.8 !important;
    font-weight:300;color:#3c3f3c !important;margin-top:clamp(20px,2.6vw,28px);
  }
  html body .phx .phx-script{
    font-family:'Dancing Script',cursive !important;font-weight:600 !important;
    font-size:clamp(26px,3.6vw,36px) !important;line-height:1.35 !important;
    color:#1c4423 !important;margin-top:clamp(24px,3vw,32px);
  }

  /* ---------- Vorteils-Karten ---------- */
  html body .phx .phx-rcard{
    z-index:0;align-self:stretch;
    background:#FFFDF8;border-radius:16px;
    box-shadow:0 14px 30px -24px rgba(31,70,32,.4), inset 0 0 0 1px rgba(176,141,62,.16);
  }
  html body .phx .phx-rico{
    z-index:1;justify-self:center;align-self:start;
    width:clamp(64px,9vw,84px) !important;height:auto !important;object-fit:contain;
  }
  html body .phx .phx-ct{
    z-index:1;align-self:start;justify-self:center;
    font-family:'Cormorant Garamond',serif !important;font-weight:600 !important;
    font-size:clamp(18px,2.4vw,23px) !important;line-height:1.3 !important;
    color:#123d1d !important;text-align:center !important;
    padding:0 16px;margin-top:14px;
  }
  /* goldener Strich unter dem Titel wie im Desktop */
  html body .phx .phx-ct::after{
    content:"";display:block;width:34px;height:1.5px;
    background:#c2a15a;margin:12px auto 0;
  }
  html body .phx .phx-cd{
    z-index:1;align-self:start;justify-self:center;
    font-size:clamp(15px,1.9vw,16.5px) !important;line-height:1.7 !important;
    font-weight:300;color:#3c3f3c !important;text-align:center !important;
    padding:10px 24px 26px;
  }

  /* ---------- Vertrauensleiste ---------- */
  html body .phx .phx-rbar{
    z-index:0;align-self:stretch;
    background:#FFFDF8;border-radius:22px;
    box-shadow:0 16px 34px -26px rgba(31,70,32,.42), inset 0 0 0 1px rgba(176,141,62,.22);
  }
  html body .phx .phx-cta{
    z-index:1;align-self:center;
    font-family:'Cormorant Garamond',serif !important;font-weight:600 !important;
    font-size:clamp(19px,2.5vw,25px) !important;line-height:1.5 !important;
    color:#123d1d !important;
  }
  /* Blatt-Badge der Leiste */
  html body .phx .phx-cta::before{
    content:"";display:block;
    width:clamp(56px,7vw,68px);height:clamp(56px,7vw,68px);
    background:url("../img/phx-badge.webp") center/cover no-repeat;
    margin:0 0 14px;
  }

  /* ---------- Button ---------- */
  html body .phx a.phx-btn{
    z-index:1;
    display:inline-flex !important;align-items:center;justify-content:center;
    gap:clamp(8px,1.4vw,14px) !important;
    width:fit-content !important;max-width:100% !important;
    height:auto !important;min-height:50px;
    padding:clamp(13px,1.7vw,16px) clamp(18px,2.4vw,24px) !important;
    border-radius:999px !important;
    font-family:'Jost',sans-serif !important;
    font-size:clamp(14px,1.8vw,16px) !important;font-weight:500 !important;
    line-height:1.25 !important;white-space:nowrap !important;text-align:center;
    box-shadow:none !important;
  }
}

/* ============================================================
   TABLET (768px – 1099px)
   Reihe 1: Einleitung volle Breite · Reihe 2: drei Karten
   Reihe 3: Vertrauensbotschaft · Reihe 4: Button
   ============================================================ */
@media (min-width:768px) and (max-width:1099.98px){

  html body .phx{
    column-gap:clamp(20px,2.8vw,32px);
    padding:clamp(52px,6vw,68px) clamp(28px,4.5vw,48px) clamp(56px,6vw,72px);
  }

  html body .phx .phx-kicker{grid-column:1 / 7;grid-row:1;}
  html body .phx h2.phx-title{grid-column:1 / 7;grid-row:2;}
  html body .phx .phx-lead   {grid-column:1 / 7;grid-row:3;max-width:62ch;}
  html body .phx .phx-script {grid-column:1 / 7;grid-row:4;}

  /* Drei gleich breite Karten */
  html body .phx .pr-1{grid-column:1 / 3;grid-row:5 / 8;}
  html body .phx .pr-2{grid-column:3 / 5;grid-row:5 / 8;}
  html body .phx .pr-3{grid-column:5 / 7;grid-row:5 / 8;}
  html body .phx .pi-1{grid-column:1 / 3;grid-row:5;}
  html body .phx .pi-2{grid-column:3 / 5;grid-row:5;}
  html body .phx .pi-3{grid-column:5 / 7;grid-row:5;}
  html body .phx .phx-ct.ph-1{grid-column:1 / 3;grid-row:6;}
  html body .phx .phx-ct.ph-2{grid-column:3 / 5;grid-row:6;}
  html body .phx .phx-ct.ph-3{grid-column:5 / 7;grid-row:6;}
  html body .phx .phx-cd.ph-1{grid-column:1 / 3;grid-row:7;}
  html body .phx .phx-cd.ph-2{grid-column:3 / 5;grid-row:7;}
  html body .phx .phx-cd.ph-3{grid-column:5 / 7;grid-row:7;}
  html body .phx .phx-rcard{margin-top:clamp(32px,4vw,44px);}
  html body .phx .phx-rico {margin-top:calc(clamp(32px,4vw,44px) + 26px);}

  /* Vertrauensleiste volle Breite, Button darunter */
  html body .phx .phx-rbar{grid-column:1 / 7;grid-row:8 / 10;margin-top:clamp(34px,4.4vw,46px);}
  html body .phx .phx-cta {grid-column:1 / 7;grid-row:8;justify-self:center;text-align:center;
                           margin-top:calc(clamp(34px,4.4vw,46px) + 30px);padding:0 28px;}
  html body .phx .phx-cta::before{margin:0 auto 14px;}
  html body .phx a.phx-btn{grid-column:1 / 7;grid-row:9;justify-self:center;
                           max-width:280px !important;margin:22px 0 32px;}
}

/* ============================================================
   MOBILE (≤767px)
   ============================================================ */
@media (max-width:767px){

  html body .phx{
    column-gap:14px;
    padding:44px 20px 52px;
  }

  html body .phx .phx-kicker{grid-column:1 / 7;grid-row:1;}
  html body .phx h2.phx-title{grid-column:1 / 7;grid-row:2;}
  html body .phx .phx-lead   {grid-column:1 / 7;grid-row:3;}
  html body .phx .phx-script {grid-column:1 / 7;grid-row:4;}

  /* Je Vorteil eine Karte pro Zeile */
  html body .phx .pr-1{grid-column:1 / 7;grid-row:5 / 8;}
  html body .phx .pi-1{grid-column:1 / 7;grid-row:5;}
  html body .phx .phx-ct.ph-1{grid-column:1 / 7;grid-row:6;}
  html body .phx .phx-cd.ph-1{grid-column:1 / 7;grid-row:7;}
  html body .phx .pr-2{grid-column:1 / 7;grid-row:8 / 11;}
  html body .phx .pi-2{grid-column:1 / 7;grid-row:8;}
  html body .phx .phx-ct.ph-2{grid-column:1 / 7;grid-row:9;}
  html body .phx .phx-cd.ph-2{grid-column:1 / 7;grid-row:10;}
  html body .phx .pr-3{grid-column:1 / 7;grid-row:11 / 14;}
  html body .phx .pi-3{grid-column:1 / 7;grid-row:11;}
  html body .phx .phx-ct.ph-3{grid-column:1 / 7;grid-row:12;}
  html body .phx .phx-cd.ph-3{grid-column:1 / 7;grid-row:13;}
  html body .phx .phx-rcard{margin-top:22px;}
  html body .phx .phx-rico {margin-top:calc(22px + 24px);}
  html body .phx .pr-1{margin-top:34px;}
  html body .phx .pi-1{margin-top:calc(34px + 24px);}

  /* Vertrauensbotschaft + Button */
  html body .phx .phx-rbar{grid-column:1 / 7;grid-row:14 / 16;margin-top:34px;}
  html body .phx .phx-cta {grid-column:1 / 7;grid-row:14;justify-self:center;text-align:center;
                           margin-top:calc(34px + 26px);padding:0 20px;}
  html body .phx .phx-cta::before{margin:0 auto 14px;}
  html body .phx a.phx-btn{grid-column:1 / 7;grid-row:15;justify-self:stretch;
                           width:100% !important;max-width:100% !important;margin:20px 0 28px;}
}