@charset "UTF-8";

/* =========================
   Global: Fließtext / Trennung
   ========================= */
.AbschnittLeistungen p,
.Arbeitsweise p,
.Leistungsversprechen p,
.AbschnittLeistungen li,
.Arbeitsweise li,
.Leistungsversprechen li{
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* =========================
   HERO (außerhalb von <main>)
   ========================= */
.hero{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  /* verhindert, dass der Header-Fade ins Bild läuft */
  padding-top:15px;              /* ~ Höhe von header::after */
  background:#f2f2f2;
}
.hero img{
  display:block;
  width:100%;
  height:auto;                   /* maßstäblich */
  max-width:1400px;
  margin:0 auto;
}
/* Fluid Base-Type nur für diese Seite */
.BodyLeistungen{
  /* 100% bei ~400px → linear bis 120% bei ≥1400px */
  font-size: clamp(1em, calc(0.92em + 0.32vw), 1.2em);
}

/* IE CSS-Override: Artikel-P-Text soll nicht eigene Größe erzwingen */
.BodyLeistungen main section article p{
  font-size: inherit;
}
/* Einheitliche, flüssige Typo für die ganze Seite */
.BodyLeistungen{
  font-size: clamp(1em, calc(0.92em + 0.32vw), 1.2em); /* 100% → 120% */
  line-height: 1.6;                                     /* Grund-Zeilenhöhe */
}

/* Absätze & Listen erben überall dieselbe Größe/Zeilenhöhe */
.BodyLeistungen p,
.BodyLeistungen li{
  font-size: 1em;           /* erbt die Body-Skalierung */
  line-height: inherit;     /* überall gleich */
  margin: 0 0 12px;         /* einheitlicher Absatzabstand */
}

/* Überschreibe Vorlagen-Regeln aus IE CSS.css für <article> */
.BodyLeistungen main section article p{
  font-size: inherit !important;
  line-height: inherit !important;
}

/* (Optional) einheitliche Zeilenhöhe für Überschriften */
.BodyLeistungen h1, .BodyLeistungen h2, .BodyLeistungen h3,
.BodyLeistungen h4, .BodyLeistungen h5, .BodyLeistungen h6{
  line-height: 1.25;  /* bleibt proportional, wirkt nur auf Heading-Zeilenhöhe */
}


/* =========================
   >= 1400px (Basis-Layout)
   ========================= */
@media screen {
  /* Abschnitt-Leistungen: Container */
  .AbschnittLeistungen{
    width:1400px;
    margin:0 auto;
  }

  /* Grid liegt auf dem Zeilen-Wrapper */
  .AbschnittLeistungen .Abschnitt-Zeile{
    display:grid;
    grid-template-columns: 70px 840px 420px 70px; /* col-1..col-4 */
    align-items:start;
    gap:0;
  }

  /* Trennzeile */
  .AbschnittLeistungen .Abschnitt-Zeile .row-spacer{
    grid-column:1 / -1;
    height:20px;
  }



  /* Spalte 2: 2 Zeilen (oben fix 60px) */
  .AbschnittLeistungen .col.col-2 .col2-grid{
    display:grid;
    grid-template-rows: 60px auto;
    row-gap:0;                   /* kein Abstand über .col2-mitte */
  }

  /* Zeile oben: links Textbreite, rechts Rest */
  .AbschnittLeistungen .col.col-2 .col2-top{
    display:grid;
    grid-template-columns: max-content 1fr;
    column-gap:12px;
    align-items:center;
  }

  /* Linke Zelle (Überschrift) */
  .col2-top .col2-top-left{ min-width:0; }
  .col2-top .col2-top-left h2{
    margin:0;
    line-height:60px;
    /* white-space:nowrap; */     /* optional: einzeilig erzwingen */
  }

  /* Rechte Zelle (Bild) */
  .col2-top .col2-top-right{
    height:60px;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .col2-top .col2-top-right img{
    height:60px;
    width:auto !important;       /* überschreibt evtl. width:100% */
    display:block;
    object-fit:contain;
    max-width:100%;
  }

  /* Mittelteil-Text */
  .AbschnittLeistungen .col.col-2 .col2-mitte p{
    margin-top:0;
    padding-right:10px;
    box-sizing:border-box;
  }

  /* Spalte 3: Bilder responsiv + Rahmung */
  .AbschnittLeistungen .col.col-3 img{
    display:block;
    width:100%;
    height:auto;
    border-radius:8px;
    box-shadow: inset 2px 3px 2px rgba(120,117,117,1);
    border:1px solid rgba(191,191,191,1);
  }

  /* Sicherheit: keine pauschale 100%-Breite forcieren */
  .AbschnittLeistungen img{
    max-width:100%;
    height:auto;
    width:auto;
  }
}
/* Pill-Button in Spalte 2 unten */
.col.col-2 .col2-unten .btn-pill{
  display:inline-block;
  padding: 6px 12px;           /* Höhe/Breite durch Text */
  background: rgb(0,38,77);     /* Hintergrund 0,38,77 */
  color: rgb(250,250,250);      /* Textfarbe 250,250,250 */
  font-weight: 400;             /* fett */
  font-size: 0.8em;               /* skaliert mit deiner Fluid-Base */
  line-height: 0.8;               
  border-radius: 9999px;        /* „Pille“: links/rechts rund */
  text-decoration: none;        /* Link ohne Unterstreichung */
  white-space: nowrap;          /* nicht umbrechen */
  cursor: pointer;
  border: none;                 /* bei <button> überschrieben ⇒ neutralisieren */
}

/* Optional: Hover/Active/Focus für Feedback & A11y */
.col.col-2 .col2-unten .btn-pill:hover{ filter: brightness(1.1); }
.col.col-2 .col2-unten .btn-pill:active{ transform: translateY(1px); }
.col.col-2 .col2-unten .btn-pill:focus-visible{
  outline: 2px solid rgba(0,38,77,.3);
  outline-offset: 2px;
}

/* =========================
   <= 1400px
   ========================= */
@media (max-width:1400px){
  .AbschnittLeistungen{ width:100%; margin:0 auto; }
  .AbschnittLeistungen .Abschnitt-Zeile{
    grid-template-columns: 4% 62% 30% 4%;
  }
}

/* =========================
   <= 1000px
   ========================= */
@media (max-width:1000px){
  .AbschnittLeistungen .Abschnitt-Zeile{
    grid-template-columns: 3% 64% 30% 3%;
  }
  .AbschnittLeistungen .col.col-2 .col2-top{ column-gap:10px; }
}

/* =========================
   <= 700px
   ========================= */
/* ========== ≤700px ========== */
  /* ========== ≤700px ========== */
@media (max-width:700px){

    
    @media (max-width:700px){
  .hero{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
          /* rechte Zelle ausblenden */
  .AbschnittLeistungen .col.col-2 .col2-top .col2-top-right{
    display: none !important;
  }
  /* obere Zeile auf 1 Spalte umstellen */
  .AbschnittLeistungen .col.col-2 .col2-top{
    grid-template-columns: 1fr !important;
  }

  /* 2) Links 5% Seitenabstand für Top-Level-Sections */
  .BodyLeistungen > section,
  .BodyLeistungen main > section{
    padding-left:5%;
    box-sizing:border-box;
  }

  /* 3) AbschnittLeistungen: 1-Spalten-Layout */
  .AbschnittLeistungen{ width:100%; }
  .AbschnittLeistungen .Abschnitt-Zeile{
    grid-template-columns: 1fr;
    row-gap:16px;
  }
  .AbschnittLeistungen .col.col-1,
  .AbschnittLeistungen .col.col-4{ display:none; }
  .AbschnittLeistungen .col.col-2,
  .AbschnittLeistungen .col.col-3{ grid-column:1; }

  /* 4) col2-top: einspaltig; Bild sichtbar & skalierend
        60vw @700px → linear → 90vw @400px; <400px = 90vw */
  .AbschnittLeistungen .col.col-2 .col2-top{ grid-template-columns:1fr; }
  .col2-top .col2-top-right{ height:auto; display:block !important; }
  .col2-top .col2-top-right img{
    display:block !important;
    width: clamp(60vw, calc(20vw + 280px), 90vw);
    height:auto;
    max-width:100%;
    margin:8px auto 0;  /* zentriert */
  }





}
      .AbschnittLeistungen .col.col-3 img{
    width: clamp(60vw, calc(20vw + 280px), 90vw);
    height: auto;
    max-width: 100%;
    display: block;
    margin: 8px auto 0; /* zentrieren */
  }
      /* keinen Doppelabstand – links schon 5% auf den Haupt-Sections */
  .Arbeitsweise,
  .Leistungsversprechen{
    padding-left: 0 !important;
  }

  /* Textspalte exakt 90vw, zentriert */
  .Arbeitsweise .Text,
  .Leistungsversprechen .Text{
    width: 90vw;
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* IE CSS überschreiben: article hatte min-width & Zentrierung */
  .Arbeitsweise .Text article,
  .Leistungsversprechen .Text article{
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
  }

@media (max-width:400px){
  .AbschnittLeistungen .Abschnitt-Zeile .row-spacer{ height:28px; }
  .AbschnittLeistungen .col.col-2 .col2-top{ column-gap:8px; }
}
  /* keinen Doppelabstand – links schon 5% auf den Haupt-Sections */
  .Arbeitsweise,
  .Leistungsversprechen{
    padding-left: 0 !important;
  }

  /* Textspalte exakt 90vw, zentriert */
  .Arbeitsweise .Text,
  .Leistungsversprechen .Text{
    width: 90vw;
    max-width: 90vw;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* IE CSS überschreiben: article hatte min-width & Zentrierung */
  .Arbeitsweise .Text article,
  .Leistungsversprechen .Text article{
    width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
  }
}