/* ============================================================
   RESPONSIVE SECTIONS – Warum KLS, Doctor, Fachbereiche, Patient Journey, Footer
   Desktop (≥1025px) bleibt vollständig unberührt: sämtliche Regeln
   liegen ausschließlich in Media Queries ≤1024px. Die einzige Regel
   außerhalb der Queries versteckt die Responsive-Hilfselemente,
   die auf dem Desktop nicht existieren dürfen.
   ============================================================ */

/* Responsive-Hilfselemente: auf Desktop unsichtbar */
.resp-only{display:none !important;}

/* ============================================================
   GEMEINSAM: Tablet + Mobile (≤1024px)
   ============================================================ */
@media (max-width:1024px){

  /* ---------- Wrapper normalisieren (kein 100vw-Overflow) ---------- */
  html body .idx-about-wrap,
  html body .idx-doc-wrap,
  html body .idx-fach-wrap,
  html body .idx-weg-wrap{
    width:100% !important;left:0 !important;transform:none !important;
  }

  /* ---------- Sektionen: Pixel-Raster deaktivieren ---------- */
  html body .idx-about,
  html body .idx-doc,
  html body .idx-fach,
  html body .idx-weg{
    aspect-ratio:auto !important;
    height:auto !important;min-height:0 !important;
    width:100% !important;
    background-image:none !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  html body .idx-about{background-color:#f1e8e1 !important;}
  html body .idx-doc{background-color:#f7f6f2 !important;}
  html body .idx-fach{background-color:#fdfaf5 !important;}
  html body .idx-weg{background-color:#fcf8f5 !important;}

  /* ---------- Kinder: aus dem absoluten Raster lösen ---------- */
  html body .idx-about > *,
  html body .idx-doc > *,
  html body .idx-fach > *,
  html body .idx-weg > *{
    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;
  }

  /* Responsive-Bilder aktivieren */
  html body .resp-only{display:block !important;}

  /* Erzwungene Desktop-Zeilenumbrüche im Fließtext aufheben
     (Footer-Adressen/-Zeiten behalten ihre Umbrüche) */
  html body .idx-about .ia-para br,
  html body .idx-doc .id-para br,
  html body .idx-doc .id-quote br,
  html body .idx-fach .fx-b br,
  html body .idx-weg .iw-b br{display:none !important;}

  /* ============================================================
     WARUM KLS – Bild + Inhalt, echtes Grid statt Pixelraster
     Spalten: [Foto] [Icon] [Text]  (Tablet)
              [Icon] [Text]         (Mobile, Foto darüber)
     ============================================================ */
  html body .idx-about{display:grid !important;align-content:start;}

  html body .idx-about .ra-photo{
    width:100% !important;height:100% !important;
    object-fit:cover;object-position:center;
    border-radius:18px;
    align-self:stretch;
  }
  html body .idx-about .ia-eyebrow{
    font-size:12.5px !important;letter-spacing:3px !important;
    text-transform:uppercase;color:#b08d3e !important;
  }
  html body .idx-about .ia-h1{
    font-family:'Cormorant Garamond',serif !important;font-weight:600 !important;
    font-size:clamp(26px,4.4vw,40px) !important;line-height:1.22 !important;
    color:#2f3d33 !important;margin-top:10px;
  }
  html body .idx-about .ia-h1 em{
    font-size:.94em !important;line-height:1.22 !important;
    color:#4E7654 !important;font-style:italic !important;font-weight:400 !important;
  }
  html body .idx-about .ia-para{
    font-size:clamp(15px,1.9vw,17px) !important;line-height:1.8 !important;
    color:#3d4a3f !important;font-weight:300;margin-top:14px;
  }
  html body .idx-about .wk-ico{
    object-fit:contain;align-self:start;justify-self:center;
  }
  html body .idx-about .ia-ft{
    font-family:'Cormorant Garamond',serif !important;font-weight:600 !important;
    font-size:clamp(19px,2.5vw,23px) !important;line-height:1.3 !important;
    color:#2f3d33 !important;align-self:start;text-align:left !important;
  }
  html body .idx-about .ia-fb{
    font-size:clamp(14.5px,1.8vw,16px) !important;line-height:1.7 !important;
    color:#4a5c4e !important;font-weight:300;align-self:start;
    text-align:left !important;margin-top:5px;
  }
  /* Desktop-Regel .idx-about .ia-fb{white-space:nowrap} aushebeln */
  html body .idx-about .ia-para,
  html body .idx-about .ia-ft,
  html body .idx-about .ia-fb{
    white-space:normal !important;
    overflow-wrap:break-word;
  }

  /* ============================================================
     DOCTOR SECTION
     ============================================================ */
  html body .idx-doc{display:grid !important;}

  html body .idx-doc .id-eyebrow{
    font-size:12px !important;letter-spacing:2.6px !important;
  }
  html body .idx-doc .id-name{
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(28px,4.4vw,42px) !important;line-height:1.2 !important;
    color:#2f3d33 !important;margin-top:10px;
  }
  html body .idx-doc .id-title{
    font-size:clamp(19px,2.6vw,25px) !important;line-height:1.4 !important;
    margin-top:6px;
  }
  html body .idx-doc .id-para{
    font-size:16px !important;line-height:1.85 !important;
    color:#3d4a3f !important;margin-top:16px;
  }
  html body .idx-doc .id-quote{
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(17px,2.2vw,21px) !important;line-height:1.7 !important;
    color:#33402f !important;margin-top:20px;
  }
  html body .idx-doc .id-btn{
    justify-self:start;margin-top:24px;
  }
  html body .idx-doc .id-bico{
    width:60px !important;height:60px !important;object-fit:contain;
    justify-self:center;margin-top:38px;
  }
  html body .idx-doc .id-lbl{
    width:auto !important;text-align:center !important;
    font-size:14px !important;line-height:1.5 !important;
    justify-self:center;margin-top:10px;
  }
  html body .idx-doc .rd-photo{
    width:100% !important;height:100% !important;object-fit:cover;
    border-radius:18px;
  }

  /* ============================================================
     FACHBEREICHE
     ============================================================ */
  html body .idx-fach .fx-eyebrow{
    font-size:12.5px !important;letter-spacing:2.8px !important;
    justify-self:center;text-align:center;
  }
  html body .idx-fach .fx-orn{
    width:130px !important;height:auto !important;
    justify-self:center;margin-top:8px;
  }
  html body .idx-fach .fx-heading{
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(27px,4.6vw,40px) !important;line-height:1.25 !important;
    color:#2f3d33 !important;justify-self:center;text-align:center;margin-top:6px;
  }
  html body .idx-fach .fx-sub{
    font-size:clamp(15px,2vw,18px) !important;line-height:1.6 !important;
    font-weight:300;color:#3d4a3f !important;
    justify-self:center;text-align:center;margin-top:10px;
  }
  html body .idx-fach .rf-img{
    width:100% !important;height:auto !important;border-radius:14px;
  }
  html body .idx-fach .fx-t,
  html body .idx-fach .fx-b,
  html body .idx-fach .fx-m{
    width:auto !important;max-width:100% !important;
    transform:none !important;text-align:center !important;
  }
  html body .idx-fach .fx-t{
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(21px,2.8vw,26px) !important;line-height:1.3 !important;
    color:#2f4636 !important;margin-top:14px;
  }
  html body .idx-fach .fx-b{
    font-size:15.5px !important;line-height:1.75 !important;
    color:#3d4a3f !important;margin-top:8px;
    padding:0 6px;
  }
  html body .idx-fach .fx-m{
    display:inline-flex !important;align-items:center !important;
    justify-content:center !important;gap:8px;
    font-size:13px !important;letter-spacing:1.6px !important;
    margin-top:14px;justify-self:center;
  }

  /* ============================================================
     PATIENT JOURNEY – vertikale Timeline (Tablet + Mobile)
     ============================================================ */
  html body .idx-weg{display:grid !important;position:relative !important;}

  html body .idx-weg .iw-eyebrow{
    grid-column:1 / 3;grid-row:1;
    font-size:12.5px !important;letter-spacing:3px !important;
    justify-self:center;text-align:center;
  }
  html body .idx-weg .iw-orn{
    grid-column:1 / 3;grid-row:2;
    width:140px !important;height:auto !important;
    justify-self:center;margin-top:8px;
  }
  html body .idx-weg .iw-heading{
    grid-column:1 / 3;grid-row:3;
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(26px,4.6vw,38px) !important;line-height:1.25 !important;
    color:#2f3d33 !important;
    justify-self:center;text-align:center;margin-top:6px;padding-bottom:38px;
  }

  /* Timeline-Linie: Pseudo-Element als Grid-Item in Spalte 1,
     über alle Schrittzeilen gespannt – richtet sich selbst aus */
  html body .idx-weg::before{
    content:'';grid-column:1;grid-row:4 / 13;
    justify-self:center;width:2px;
    background:linear-gradient(#dfd3ba, #cbd6c6);
    margin:30px 0 60px;
  }
  html body .idx-weg .rw-ico{
    grid-column:1;position:relative !important;z-index:1;
    justify-self:center;align-self:start;
    border-radius:50%;
  }
  html body .idx-weg .iw-t{
    grid-column:2;
    width:auto !important;text-align:left !important;
    font-family:'Cormorant Garamond',serif !important;
    font-size:clamp(20px,2.6vw,24px) !important;line-height:1.3 !important;
    color:#2f4636 !important;align-self:start;margin-top:4px;
  }
  html body .idx-weg .iw-b{
    grid-column:2;
    width:auto !important;text-align:left !important;
    font-size:15.5px !important;line-height:1.75 !important;
    color:#3d4a3f !important;align-self:start;margin-top:6px;padding-bottom:38px;
  }
  /* Zeilenzuordnung der 5 Schritte */
  html body .idx-weg .rw-1{grid-row:4 / 6;} html body .idx-weg .iw-t.iw-1{grid-row:4;} html body .idx-weg .iw-b.iw-1{grid-row:5;}
  html body .idx-weg .rw-2{grid-row:6 / 8;} html body .idx-weg .iw-t.iw-2{grid-row:6;} html body .idx-weg .iw-b.iw-2{grid-row:7;}
  html body .idx-weg .rw-3{grid-row:8 / 10;} html body .idx-weg .iw-t.iw-3{grid-row:8;} html body .idx-weg .iw-b.iw-3{grid-row:9;}
  html body .idx-weg .rw-4{grid-row:10 / 12;} html body .idx-weg .iw-t.iw-4{grid-row:10;} html body .idx-weg .iw-b.iw-4{grid-row:11;}
  html body .idx-weg .rw-5{grid-row:12 / 14;} html body .idx-weg .iw-t.iw-5{grid-row:12;} html body .idx-weg .iw-b.iw-5{grid-row:13;}

  html body .idx-weg .iw-btn,
  html body .idx-weg .iw-btn:hover{
    grid-column:1 / 3;grid-row:14;
    position:static !important;transform:none !important;
    justify-self:center;margin-top:10px;
  }
  html body .idx-weg .iw-btn:hover{transform:translateY(-2px) !important;}

}

/* ============================================================
   TABLET (768px – 1024px)
   ============================================================ */
@media (min-width:768px) and (max-width:1024px){

  /* ---- Warum KLS: Foto oben, Inhalt darunter, Vorteile 2×2 ---- */
  html body .idx-about{
    grid-template-columns:56px minmax(0,1fr) 56px minmax(0,1fr);
    column-gap:clamp(16px,2.4vw,26px);
    padding:clamp(48px,6vw,64px) clamp(28px,4.5vw,48px) clamp(52px,6vw,66px);
  }
  html body .idx-about .ra-photo{
    grid-column:1 / 5;grid-row:1;
    height:auto !important;aspect-ratio:16 / 9;max-height:440px;
    margin-bottom:clamp(26px,3.5vw,34px);
  }
  html body .idx-about .ia-eyebrow{grid-column:1 / 5;grid-row:2;}
  html body .idx-about .ia-h1     {grid-column:1 / 5;grid-row:3;}
  html body .idx-about .ia-para   {grid-column:1 / 5;grid-row:4;padding-bottom:30px;}
  html body .idx-about .wk-ico{width:52px !important;height:52px !important;margin-top:2px;}
  html body .idx-about .wk-1{grid-column:1;grid-row:5 / 7;}
  html body .idx-about .wk-2{grid-column:3;grid-row:5 / 7;}
  html body .idx-about .wk-3{grid-column:1;grid-row:7 / 9;}
  html body .idx-about .wk-4{grid-column:3;grid-row:7 / 9;}
  html body .idx-about .ia-ft.if1t{grid-column:2;grid-row:5;}
  html body .idx-about .ia-fb.if1b{grid-column:2;grid-row:6;padding-bottom:30px;}
  html body .idx-about .ia-ft.if2t{grid-column:4;grid-row:5;}
  html body .idx-about .ia-fb.if2b{grid-column:4;grid-row:6;padding-bottom:30px;}
  html body .idx-about .ia-ft.if3t{grid-column:2;grid-row:7;}
  html body .idx-about .ia-fb.if3b{grid-column:2;grid-row:8;}
  html body .idx-about .ia-ft.if4t{grid-column:4;grid-row:7;}
  html body .idx-about .ia-fb.if4b{grid-column:4;grid-row:8;}

  /* ---- Doctor: zwei ausgewogene Spalten, Icons darunter ---- */
  html body .idx-doc{
    grid-template-columns:repeat(4, minmax(0,1fr));
    column-gap:34px;
    padding:60px 44px 64px;
  }
  html body .idx-doc .id-eyebrow{grid-column:1 / 3;grid-row:1;}
  html body .idx-doc .id-name  {grid-column:1 / 3;grid-row:2;}
  html body .idx-doc .id-title {grid-column:1 / 3;grid-row:3;}
  html body .idx-doc .id-para  {grid-column:1 / 3;grid-row:4;}
  html body .idx-doc .id-quote {grid-column:1 / 3;grid-row:5;}
  html body .idx-doc .id-btn   {grid-column:1 / 3;grid-row:6;align-self:end;}
  html body .idx-doc .rd-photo {grid-column:3 / 5;grid-row:1 / 7;align-self:stretch;}
  html body .idx-doc img.id-bico:nth-of-type(1){grid-column:1;grid-row:7;}
  html body .idx-doc img.id-bico:nth-of-type(2){grid-column:2;grid-row:7;}
  html body .idx-doc img.id-bico:nth-of-type(3){grid-column:3;grid-row:7;}
  html body .idx-doc img.id-bico:nth-of-type(4){grid-column:4;grid-row:7;}
  html body .idx-doc .id-lbl.idl-1{grid-column:1;grid-row:8;}
  html body .idx-doc .id-lbl.idl-2{grid-column:2;grid-row:8;}
  html body .idx-doc .id-lbl.idl-3{grid-column:3;grid-row:8;}
  html body .idx-doc .id-lbl.idl-4{grid-column:4;grid-row:8;}

  /* ---- Fachbereiche: 2 Karten pro Reihe ---- */
  html body .idx-fach{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:40px;
    padding:58px 44px 64px;
  }
  html body .idx-fach .fx-eyebrow{grid-column:1 / 3;grid-row:1;}
  html body .idx-fach .fx-orn   {grid-column:1 / 3;grid-row:2;}
  html body .idx-fach .fx-heading{grid-column:1 / 3;grid-row:3;}
  html body .idx-fach .fx-sub   {grid-column:1 / 3;grid-row:4;padding-bottom:36px;}
  html body .idx-fach .rf-1{grid-column:1;grid-row:5;}
  html body .idx-fach .fx-t.fc-1{grid-column:1;grid-row:6;}
  html body .idx-fach .fx-b.fc-1{grid-column:1;grid-row:7;}
  html body .idx-fach .fx-m.fc-1{grid-column:1;grid-row:8;align-self:start;padding-bottom:42px;}
  html body .idx-fach .rf-2{grid-column:2;grid-row:5;}
  html body .idx-fach .fx-t.fc-2{grid-column:2;grid-row:6;}
  html body .idx-fach .fx-b.fc-2{grid-column:2;grid-row:7;}
  html body .idx-fach .fx-m.fc-2{grid-column:2;grid-row:8;align-self:start;padding-bottom:42px;}
  html body .idx-fach .rf-3{grid-column:1;grid-row:9;}
  html body .idx-fach .fx-t.fc-3{grid-column:1;grid-row:10;}
  html body .idx-fach .fx-b.fc-3{grid-column:1;grid-row:11;}
  html body .idx-fach .fx-m.fc-3{grid-column:1;grid-row:12;align-self:start;}
  html body .idx-fach .rf-4{grid-column:2;grid-row:9;}
  html body .idx-fach .fx-t.fc-4{grid-column:2;grid-row:10;}
  html body .idx-fach .fx-b.fc-4{grid-column:2;grid-row:11;}
  html body .idx-fach .fx-m.fc-4{grid-column:2;grid-row:12;align-self:start;}

  /* ---- Journey: Timeline-Spaltenbreite Tablet ---- */
  html body .idx-weg{
    grid-template-columns:110px minmax(0,1fr);
    column-gap:26px;
    padding:58px 48px 64px;
  }
  html body .idx-weg .rw-ico{width:86px !important;height:auto !important;}}

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

  /* ---- Warum KLS: Bild oben, Text darunter, Vorteile als Liste ---- */
  html body .idx-about{
    grid-template-columns:52px minmax(0,1fr);
    column-gap:16px;
    padding:44px 20px 52px;
  }
  html body .idx-about .ra-photo{
    grid-column:1 / 3;grid-row:1;
    height:auto !important;aspect-ratio:4 / 3;
    border-radius:16px;margin-bottom:26px;
  }
  html body .idx-about .ia-eyebrow{grid-column:1 / 3;grid-row:2;}
  html body .idx-about .ia-h1     {grid-column:1 / 3;grid-row:3;}
  html body .idx-about .ia-para   {grid-column:1 / 3;grid-row:4;padding-bottom:26px;}
  html body .idx-about .wk-ico{width:44px !important;height:44px !important;margin-top:2px;}
  html body .idx-about .wk-1{grid-column:1;grid-row:5 / 7;}
  html body .idx-about .wk-2{grid-column:1;grid-row:7 / 9;}
  html body .idx-about .wk-3{grid-column:1;grid-row:9 / 11;}
  html body .idx-about .wk-4{grid-column:1;grid-row:11 / 13;}
  html body .idx-about .ia-ft.if1t{grid-column:2;grid-row:5;}
  html body .idx-about .ia-fb.if1b{grid-column:2;grid-row:6;padding-bottom:24px;}
  html body .idx-about .ia-ft.if2t{grid-column:2;grid-row:7;}
  html body .idx-about .ia-fb.if2b{grid-column:2;grid-row:8;padding-bottom:24px;}
  html body .idx-about .ia-ft.if3t{grid-column:2;grid-row:9;}
  html body .idx-about .ia-fb.if3b{grid-column:2;grid-row:10;padding-bottom:24px;}
  html body .idx-about .ia-ft.if4t{grid-column:2;grid-row:11;}
  html body .idx-about .ia-fb.if4b{grid-column:2;grid-row:12;}

  /* ---- Doctor: Inhalt zuerst, Arztbild darunter ---- */
  html body .idx-doc{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:18px;
    padding:44px 22px 52px;
  }
  html body .idx-doc .id-eyebrow{grid-column:1 / 3;grid-row:1;}
  html body .idx-doc .id-name  {grid-column:1 / 3;grid-row:2;}
  html body .idx-doc .id-title {grid-column:1 / 3;grid-row:3;}
  html body .idx-doc .id-para  {grid-column:1 / 3;grid-row:4;}
  html body .idx-doc img.id-bico:nth-of-type(1){grid-column:1;grid-row:5;}
  html body .idx-doc img.id-bico:nth-of-type(2){grid-column:2;grid-row:5;}
  html body .idx-doc .id-lbl.idl-1{grid-column:1;grid-row:6;}
  html body .idx-doc .id-lbl.idl-2{grid-column:2;grid-row:6;}
  html body .idx-doc img.id-bico:nth-of-type(3){grid-column:1;grid-row:7;margin-top:26px;}
  html body .idx-doc img.id-bico:nth-of-type(4){grid-column:2;grid-row:7;margin-top:26px;}
  html body .idx-doc .id-lbl.idl-3{grid-column:1;grid-row:8;}
  html body .idx-doc .id-lbl.idl-4{grid-column:2;grid-row:8;}
  html body .idx-doc .id-quote{grid-column:1 / 3;grid-row:9;margin-top:30px;}
  html body .idx-doc .id-btn  {grid-column:1 / 3;grid-row:10;justify-self:stretch;}
  html body .idx-doc .rd-photo{grid-column:1 / 3;grid-row:11;margin-top:30px;height:auto !important;border-radius:16px;}

  /* ---- Fachbereiche: 1 Karte pro Reihe ---- */
  html body .idx-fach{
    display:flex !important;flex-direction:column;
    padding:44px 22px 52px;
  }
  html body .idx-fach .fx-eyebrow,
  html body .idx-fach .fx-orn,
  html body .idx-fach .fx-heading,
  html body .idx-fach .fx-sub{align-self:center;text-align:center;}
  html body .idx-fach .fx-sub{margin-bottom:32px;}
  html body .idx-fach .rf-img{margin-top:6px;}
  html body .idx-fach .fx-m{margin-bottom:34px;}
  html body .idx-fach .fx-m.fc-4{margin-bottom:0;}

  /* ---- Journey: Timeline-Spaltenbreite Mobile ---- */
  html body .idx-weg{
    grid-template-columns:76px minmax(0,1fr);
    column-gap:16px;
    padding:44px 20px 52px;
  }
  html body .idx-weg .rw-ico{width:64px !important;height:auto !important;}
  html body .idx-weg .iw-btn{justify-self:stretch !important;}}