/* === Farben === */

/*

Blau:           #4169E1
Hellgrau:       #FAFAFA
Mittelgrau:     #757575
Dunkelgrau:     #1E1E1E

*/

/* === Fonts === */

/* manrope-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/webfonts/manrope-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/webfonts/manrope-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/webfonts/manrope-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/webfonts/manrope-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/webfonts/manrope-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/webfonts/manrope-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/webfonts/manrope-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* === Global === */

html {
    font-size: 16px;
}

/* 4) Sicherheitsnetz für das ganze Dokument */
html{
  overflow-x: clip;     /* moderner als hidden: kein seitliches Scrollen,
                           aber ohne neue Formatierungskontexte */
}


body {
    margin: 0;
    font-family:  'Manrope', 'Helvetica Neue', 'Arial', sans-serif;
}

* {
    box-sizing: border-box;
}

section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  section {
  padding-top: .7rem;
  padding-bottom: .7rem;
}
}

/* === Generelles === */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.active {
    background-color: #4169E1 !important;
}

.intro-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  color: #1E1E1E;
  text-align: center;
}

.intro-container > h1 {
  font-size: 2.3rem;
}

.intro-container > p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #757575;
}


/* Responsiv */
@media (max-width: 768px){
  .intro-container{ width: 95%; }
  .intro-container h1{ font-size: 1.4rem;}
  .intro-container p { font-size: 1rem; text-align: left;}
}

/* Bewegungen reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
  .mobile-nav-content{ transition: none; }
}

/* === Navigationsleiste (Desktop) === */

.header-nav {
    width: 100%;
    height: 120px;
    background-color: #1E1E1E;
    font-weight: bold;
    font-size: 1.1rem;
    top: 0;
}

.header-nav ul {
    margin: 0;
    padding: 0;
    height: 100%;
    float: right;
    font-size: 0;
}

.header-nav ul > li {
    display: inline-block;
    margin-left: 0;
    height: 100%;
    padding: 0;
    font-size: 1.1rem;
}

.header-nav ul > li:hover {
    background-color: #4169E1;
}

.header-nav ul > li > a {
    display: inline-block;
    line-height: 131px;
    margin-top: 0;
    padding: 0 .65rem;
}

.header-nav ul > li > a:link {
    color: #fff;
    text-decoration: none;
}

.header-nav ul > li > a:hover {
    color: #FAFAFA;
    text-decoration: none;
}

.header-nav ul > li > a:active {
    color: #FAFAFA;
    text-decoration: none;
}

.header-nav ul > li > a:visited {
    color: #fff;
    text-decoration: none;
}

.header-nav .col-6 {
    padding-top: 0;
    padding-bottom: 0;
}

.header-nav .container,
.header-nav .row,
.header-nav .col-6 {
    height: 100%;
}

/* Header & Logo auf die Variable normieren */
.header-nav { height: var(--header-h); }
.header-nav a > img { height: var(--header-h); }

/* UL/LI/A sauber vertikal zentrieren – ohne 131px */
.header-nav ul{
  display: flex;               /* statt inline-block-Hack */
  align-items: center;         /* vertikal zentrieren */
  height: 100%;
  font-size: 0;                /* optional: alten Inline-Spacing neutralisieren */
}
.header-nav ul > li{
  display: flex;
  align-items: stretch;
  height: 100%;
  font-size: 1.1rem;           /* Schriftgröße pro LI wieder setzen */
}
.header-nav ul > li > a{
  display: flex;
  align-items: center;         /* Text vertikal mittig */
  height: 100%;
  line-height: var(--header-h);/* !!! statt 131px */
  padding: 0 .8rem;
}

/* Sicherheit: Links im offenen Menü bekommen die Klicks garantiert */
.mobile-nav-dropdown.is-open .mobile-nav-content,
.mobile-nav-dropdown.is-open .mobile-nav-content *{
  pointer-events: auto;
}

/* Wenn das Mobile-Menü offen ist, Header nicht transformieren und nicht clippen */
html.nav-open .header-nav{
  transform: none !important;
  overflow: visible !important;     /* hebt overflow-y:hidden auf */
  z-index: 99990;                   /* Header ganz nach oben */
}

/* Header von sticky -> fixed + animierbar */
.header-nav{
  position: fixed;         /* statt sticky */
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  transform: translateY(0);
  transition: transform .28s ease;
  will-change: transform;
}

/* ausgeblendet */
.header-nav.is-hidden{
  transform: translateY(calc(-1 * var(--header-h)));
}

/* Platz für den fixen Header reservieren, damit kein Layout-Sprung entsteht */
body{ padding-top: var(--header-h); }

@media (prefers-reduced-motion: reduce){
  .header-nav{ transition: none; }
}

/* --- Mobile Navigation --- */

/* Standard: Desktop zeigen, Mobile verstecken */
.mobile-nav { display: none; }
@media (max-width: 768px){
  :root{ --header-h: 80px; }                  /* kompakterer Header mobil */
  .desktop-nav { display: none; }
  .mobile-nav  { display: block; }
}

/* Container/Zeile */
.mobile-nav-dropdown{
  position: relative;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* Logo mobil – überschreibt globale Bild-Regel */
.mobile-logo{ display: block; line-height: 0; }
.mobile-logo img{
  height: calc(var(--header-h) - 20px);
  width: auto;
  float: none !important;        /* globales float neutralisieren */
}

/* Hamburger-Button */
.mobile-nav-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}
.mobile-nav-button i{ font-size: 1.25rem; pointer-events: none; }
.mobile-nav-button:focus-visible{
  outline: 3px solid rgba(65,105,225,.45);
  outline-offset: 2px;
}

/* Dropdown-Panel */
.mobile-nav-content{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(92vw, 360px);
  background: #1E1E1E;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  padding: .5rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 1100;
}

/* sichtbar, wenn .is-open gesetzt (macht dein JS) */
.mobile-nav-dropdown.is-open .mobile-nav-content{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Kleiner Feinschliff: Headerhöhe & Logo mobil */
@media (max-width: 768px){
  .header-nav a > img{ height: calc(var(--header-h) - 20px); }
}


/* --- FIX 1: Mobile-Dropdown wirklich anklickbar & über allem ---  */
.header-nav{ z-index: 2000; }











/* === Allgemeiner Header-Banner Background === */

.header-banner {
    background: url(../img/header-background.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.59375%;
    background-size: contain;
    overflow: hidden;
}

.header-banner-ueber-uns {
    background: url(../img/header-ueber-uns.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4525%;
    background-size: contain;
}

.header-banner-leistungen {
    background: url(../img/header-leistungen.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.7554%;
    background-size: contain;
}

.header-banner-aktuelles {
    background: url(../img/header-aktuelles.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4375%;
    background-size: contain;
}

.header-banner-kontakt {
    background: url(../img/header-kontakt.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4375%;
    background-size: contain;
}

/* === Allgemeiner Overlay für dem Header-Banner === */

.header-banner { position: relative; }
.header-banner-ueber-uns { position: relative; }
.header-banner-leistungen { position: relative; }
.header-banner-aktuelles { position: relative; }
.header-banner-kontakt { position: relative; }

/* === Allgemeiner Slogan-Overlay === */
.slogan {
  position: absolute;
  left: 0;                 /* entspricht deiner .container Breite (95%) */
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: white;
  width: min(980px, 100%);           /* angenehme Zeilenlänge */
  margin: 0;
}

/* === Allgemeiner Slogan-Top === */

.slogan-top {
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
}

/* === Allgemeiner Slogan-Bottom === */

.slogan-bottom {
  font-weight: 300;
  font-size: 1.125rem;   /* etwas kleiner als .slogan-top */
  color: white;        /* dezenter als der Hauptclaim */
  margin: .35rem 0 .9rem;/* Luft zum Button darunter */
}

/* === Allgemeine Anpassung Header (Mobil) === */

@media (max-width: 768px){
  .slogan { top: auto; bottom: 8%; transform: none; }
  .slogan-top { font-size: 1.25rem; }
  .slogan-bottom { font-size: 1rem; margin: .3rem 0 .8rem;}
}

.slogan-panel{ position: relative; z-index: 1;}

.slogan-panel::before{
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: -0.6rem;            /* Abstand oben */
  bottom: -0.6rem;         /* Abstand unten */
  background: rgba(30, 30, 30, .8);  /* gleiche Farbe wie Desktop */
  z-index: -1;             /* hinter den Text */
  width: 200vw;
  transform: translateX(-50%);
}

/* === Container-Variable + Ausrichtung der Slogan-Box === */
:root{
  --container-w: 95%;
}

/* Falls noch nicht so: Container auf Variable umstellen */
.container{
  width: var(--container-w);
}

/* Der Slogan startet am linken Rand des Containers */
.slogan{
  left: calc((100% - var(--container-w)) / 2) !important;
  right: auto;
}

.header-banner .container {
  overflow-x: visible;
}

.slogan-panel {
  position: relative;
  overflow-x: visible !important;
  z-index: 0;
}

/* === Leistungen (Startseite) === */

.leistungen-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}

.leistungen-card {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.leistungen-card h2 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.leistungen-card p {
  margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;
}

.leistungen-card .service-button {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 768px) {
  .leistungen-card {
    text-align: center;
  }

  .leistungen-card .service-button {
    margin-left: auto;
    margin-right: auto;
  }
}

/* === Unsere Vorteile 000 */

.service-box {
  text-align: center;
  width: 80%;
}
.service-bereich .row:nth-of-type(2) > .col-2:first-of-type > .service-box {
  margin-right: 0;
  margin-left: auto;
}

.service-bereich .row:nth-of-type(2) > .col-2:nth-of-type(2) > .service-box {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 768px) {
  .service-bereich .row:nth-of-type(2) > .col-2:first-of-type > .service-box {
  margin-right: auto;
  margin-left: auto;
  }
  .service-bereich .row:nth-of-type(2) > .col-2:nth-of-type(3) > .service-box{
  margin-right: auto;
  margin-left: auto;
  }
}



/* Icon-Box */
.feature-icon {
  flex: 0 0 56px;
  width: 56px;               /* explizit setzen für perfekte Kreise */
  height: 56px;
  border-radius: 50%;        /* rund */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9e9;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.feature-icon i { font-size: 1.75rem; color: #4169E1; }

/* Text */
.feature-text h3 {
  margin: 0 0 .25rem;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #1E1E1E;
}
.feature-text p {
  margin: 0;
  color: #757575;
  line-height: 1.5;
}

.service-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}


/* === Über uns (Startseite) === */
.about {
  background: #FAFAFA;
  padding: 3rem 0;
  color: #1E1E1E;
}

.about .eyebrow {
  margin: 0 0 .25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #757575;
  font-size: .875rem;
}

.about-title { margin: 0 0 1rem; line-height: 1.2; font-size: 2rem; color: #1E1E1E; text-align: center;}
.about-text  { 
    margin: 0 0 1rem;
    color: #757575; 
}

.about-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.about-list li { 
    position: relative;
    padding-left: 1.4rem;
    margin: .4rem 0;
    color: #757575;
}

.about-list li::before {
    content: "✓";               /* Standard-HTML-Zeichen */
    position: absolute;
    left: 0; top: 0;
    color: #4169E1;
    font-weight: 700;
    line-height: 1.4;
}

.about-list i  { color: #4169E1; line-height: 1.4; margin-top: .15rem; }

.about-button {
  display: inline-block;
  background: #1E1E1E;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .85rem 1.2rem;
  border-radius: .25rem;
}
.about-button:hover { background: #3458cf; }

.about-photo {
  min-height: 360px;
  background: #e9e9e9 center/cover no-repeat;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Stack unter 768px – dein Grid macht col-3 ohnehin 100% */
@media (max-width: 768px) {
  .about-photo { min-height: 260px; margin-top: 1rem; }
}

.kpi-card {
  background: #FAFAFA;                  /* wie die About-/News-Cards */
  border-radius: 8px;                   /* gleiche Rundung */
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* Card-Shadow wie News */
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kpi-card h4 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.kpi-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.kpi-list li {
  margin: .4rem 0;
  color: #757575;
  line-height: 1.4;
  position: relative;
  padding-left: 1.4rem;
}

.kpi-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4169E1;       /* Markenblau */
  font-size: 1.2rem;
  line-height: 1;
}

.kpi-list strong {
  color: #1E1E1E;
  font-weight: 800;
  margin-right: .25rem;
}

.link-quiet {
  margin-top: auto;
  font-weight: 600;
  color: #4169E1;
  text-decoration: none;
}

.link-quiet:hover {
  text-decoration: underline;
  color: #3458cf;       /* Hover wie Buttons */
}

.process-steps{list-style:none;padding:0;margin:.5rem 0 0}
.process-steps li{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.process-steps li::before{content:"";width:10px;height:10px;border-radius:50%;background:#0a7a5c;flex:0 0 10px}
.process-steps li span{flex:1}

/* === Services – Stil wie „Über uns“ === */
.service {
  padding: 3rem 0;
  color: #1E1E1E;
  background: #fff;
}
.service-gray { background: #FAFAFA; }

.eyebrow {                      /* auch im About verwendbar */
  margin: 0 0 .25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #757575;
  font-size: .875rem;
}

.service-title {
  margin: 0 0 1rem;
  line-height: 1.2;
  font-size: 2rem;
}

.service p { margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;}

.service-button {
  display: inline-flex;      /* statt inline-block */
  align-items: center;
  justify-content: center;
  gap: .35rem;               /* optional, falls später Icons dazukommen */
  background: #1E1E1E;
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.2rem;
  border-radius: .25rem;
  line-height: 1;            /* gleiche Höhe */
  cursor: pointer;
  text-decoration: none !important;
}
.service-button:hover { background: #3458cf; }

/* already have .service-button styles */
.service-button[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
  pointer-events: none; /* blockt Klicks */
}



/* Tastaturfokus sichtbar, konsistent für beide */
.service-button:focus-visible {
  outline: 2px solid #3458cf;
  outline-offset: 2px;
}

/* Deaktivierter Zustand (für Submit bis alles valide ist) */
.service-button:disabled,
.service-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
}

/* Icon-Panel rechts/links */
.service-icon {
  min-height: 360px;
  border-radius: 4px;
  background: #e9e9e9;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: flex;               /* zentriert das Icon */
  align-items: center;
  justify-content: center;
}
.service-icon i {
  font-size: 5rem;
  color: #4169E1;
}

/* Responsive – dein Grid setzt col-3 auf 100%, hier nur Feinschliff */
@media (max-width: 768px) {
  .service-icon { min-height: 220px; margin-top: 1rem; }
  .service .row { display: flex; flex-direction: column; }

  /* Nur beim zweiten Service-Block (direkt nach dem ersten):
     Bild/Platzhalter nach unten, Text nach oben */
  .service + .service .row > .col-3:first-child { order: 2; } /* Icon/Foto-Spalte */
  .service + .service .row > .col-3:last-child  { order: 1; } /* Text-Spalte */
}



/* === Features (2×4, Icon + Text) === */
.features { padding: 3rem 0; }
.features.service-gray { background: #FAFAFA; }

/* Jede Feature-Zeile: Icon links, Text rechts */
.features .col-3 > div {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}
.features .col-3 > div:last-child { border-bottom: 0; }

/* Responsive: unter 768px werden die col-3 bereits zu 100%,
   wir geben nur etwas Luft zwischen den beiden Spalten */
@media (max-width: 768px) {
  .features .row > .col-3 + .col-3 { margin-top: 1.25rem; }
}

/* Liste mit runden, blauen Check-Badges */
.feature-list{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;                 /* Abstand zwischen den Punkten */
}

.feature-list li{
  position: relative;
  padding-left: 1.45rem;       /* Platz für Badge */
  line-height: 1.6;
  color: #757575;
}

/* Badge: klein, sauber vertikal zentriert */
.feature-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .82rem;                  /* vertikal zur ersten Textzeile ausgerichtet */
  transform: translateY(-50%);
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .6rem;            /* Checkmark-Größe */
  font-weight: 800;
  color: #fff;
  background: #4169E1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.process-card{
  background:#FAFAFA;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:1.25rem 1.5rem;
  display:flex;
  flex-direction:column;
  height:100%;
}
.process-card h4{
  margin:0 0 .75rem;
  font-size:1.25rem;
  font-weight:700;
  color:#1E1E1E;
}

/* Nummerierte Abfolge mit vertikaler Linie */
.process-steps{
  counter-reset: step;
  list-style:none;
  margin:.25rem 0 1rem;
  padding:0 0 0 .25rem; /* leichte Einrückung */
  position:relative;
}
.process-steps li{
  counter-increment: step;
  position:relative;
  padding-left:2.25rem;       /* Platz für Badge */
  margin:.55rem 0 .55rem;
  color:#757575;
  line-height:1.45;
}
/* Verbindungslinie (vertikal) */
.process-steps li::before{
  content: counter(step);
  position:absolute;
  left:0;
  top:.1rem;
  width:1.45rem;
  height:1.45rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.9rem;
  color:#fff;
  background:#4169E1;        /* Markenblau */
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  z-index:1;
}
.process-steps li::after{
  content:"";
  position:absolute;
  left:.71rem;               /* Mitte des Kreises */
  top:1.45rem;
  bottom:-.65rem;            /* kleine Überlappung nach unten */
  width:2px;
  background:linear-gradient(
    to bottom,
    rgba(65,105,225,.5),
    rgba(65,105,225,.16)
  );
}
.process-steps li:last-child::after{ display:none; }

.process-card .link-quiet{
  margin-top:auto;
  font-weight:600;
  color:#4169E1;
  text-decoration:none;
}
.process-card .link-quiet:hover{ color:#3458cf; text-decoration:underline; }

/* Mobile: etwas dichter und ohne lange Linie-Überhänge */
@media (max-width:768px){
  .process-steps li{ margin:.45rem 0 .45rem; }
  .process-steps li::after{ bottom:-.4rem; }
}

.process-card .service-button{
  margin-top: .5rem;      /* etwas Luft über dem Button */
  align-self: flex-start; /* bleibt linksbündig wie deine anderen CTAs */
}
/* Wenn du ihn in der Karte lieber über die volle Breite willst: */
/* .process-card .service-button{ width: 100%; text-align: center; } */





/* Zweizeiler */
.feature-intro{
  margin: .25rem 0 .5rem;
  color: #4A4A4A;
  line-height: 1.6;
}

/* Kartenlook für Pakete – nutzt vorhandene Typo/Buttons */
.package-card{
  background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:1rem; height:100%; display:flex; flex-direction:column; gap:.6rem;
}
.package-title{ margin:.25rem 0 0; font-size:1.25rem; line-height:1.3; color:#1E1E1E; }
.package-sub{ margin:0; color:#757575; }
.package-badge{
  align-self:flex-start; background:#4169E1; color:#fff; font-weight:700; 
  padding:.2rem .5rem; border-radius:.35rem; font-size:.8rem;
}
.package-reco{ outline:2px solid rgba(65,105,225,.25); }
.package-card .service-button{ margin-top:auto; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:2000; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-dialog{
  position:relative; margin:6vh auto; max-width:720px;
  background:#fff; border-radius:8px; box-shadow:0 20px 40px rgba(0,0,0,.2);
  padding:1rem 1.25rem;
}
.modal-close{ position:absolute; right:.5rem; top:.5rem; background:transparent; border:0;
  font-size:1.75rem; line-height:1; color:#757575; cursor:pointer; }
.modal-hint{ margin:.25rem 0 1rem; color:#757575; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.field-full{ grid-column:1 / -1; }
.modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; }
.btn-secondary{ background:#1E1E1E; } .btn-secondary:hover{ background:#3458cf; }
@media (max-width:768px){ .modal-dialog{ margin:8vh .75rem; } .modal-grid{ grid-template-columns:1fr; } }


/* === Aktuelles / News === */


.benefit-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem;padding:0;list-style:none}
.benefit-tags li{background:#4169E1;border-radius:999px;padding:.35rem .7rem;font-weight:600; color: #fff;}

/* Karriere – Hero-Look */
.career-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}
.career-title{
  margin: .25rem 0 .4rem;
  line-height: 1.15;
  font-size: 2.1rem;
  color: #1E1E1E;
}
.career-sub{
  margin: .25rem 0 .9rem;
  color: #4A4A4A;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* kurze, lesbare Nutzenliste */
.career-highlights{
  list-style: none;
  margin: .4rem 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  color: #757575;
}
.career-highlights li{
  position: relative;
  padding-left: 1.35rem;
}
.career-highlights li::before{
  content: "✓";
  position: absolute; left: 0; top: .08rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 800; color: #fff;
  background: #4169E1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* CTA-Gruppe */
.apply-buttons{
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.apply-buttons .service-button{ width: auto; } /* nur so breit wie nötig */

@media (max-width: 768px){
  .apply-buttons{
    justify-content: center;   /* zentriert den Inhalt horizontal */
  }
  .apply-buttons .service-button{
    margin-left: auto;         /* doppelt hält besser bei einzelnen Buttons */
    margin-right: auto;
  }
}

/* Benefits-Karte */
.benefits-card{
  background: #FAFAFA;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 1.1rem 1.2rem;
}
.benefits-title{
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  color: #1E1E1E;
}

/* Grid mit Icon + Text */
.benefit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem .9rem;
  margin: .4rem 0 .6rem;
}
@media (max-width: 768px){
  .benefit-grid{ grid-template-columns: 1fr; }
}

.benefit-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: .75rem .8rem;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .6rem;
  align-items: start;
}
.benefit-item i{
  font-size: 1.35rem;
  color: #4169E1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F2F5FF;
}
.benefit-item h4{
  margin: .05rem 0 .15rem; font-size: 1.05rem; color: #1E1E1E;
}
.benefit-item p{
  margin: 0; color: #757575; line-height: 1.45; font-size: .98rem;
}

/* Tag-Leiste dezenter unter dem Grid */
.benefits-card .benefit-tags{
  margin-top: .6rem;
}

/* Mobile Feinschliff */
@media (max-width: 768px){
  .career-title{ font-size: 1.75rem; }
  .career-sub{ font-size: 1rem; }
}

/* === Kontakt-CTA === */
.contact-cta {
  background: #1E1E1E;
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.contact-cta .container { max-width: 1000px; }

/* runder Icon-Badge */
.contact-cta-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #4169E1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.contact-cta-icon i { font-size: 2rem; color: #fff; }

/* Typo */
.contact-cta-title {
  margin: 0 auto .75rem;
  line-height: 1.2;
  font-size: 2rem;
  max-width: 28ch;
  color: #fff;
}
.contact-cta-text {
  margin: 0 auto 1.25rem;
  max-width: 65ch;
  color: #FAFAFA;
  line-height: 1.6;
}

/* Button – wie die übrigen CTAs */
.contact-cta-button {
  display: inline-block;
  background: #4169E1;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .9rem 1.2rem;
  border-radius: .25rem;
}
.contact-cta-button:hover { background: #3458cf; }
.contact-cta-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Mobile Feinschliff */
@media (max-width: 768px) {
  .contact-cta-title { font-size: 1.75rem; }
  .contact-cta-icon { width: 72px; height: 72px; }
}

/* === Über-uns Seite: Values-Grid & Team-Claim === */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
}
.value-box {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  text-align: center;
  padding: 1rem;
}
.value-box i { font-size: 1.75rem; color: #4169E1; display: block; margin-bottom: .35rem; }
.value-box h4 { margin: 0; font-size: 1rem; color: #1E1E1E; }

/* Team-Claim unter den Cards */
.team-claim {
  text-align: center;
  margin-top: 2rem;
  color: #1E1E1E;
}
.team-claim h4 { margin: 0 0 .25rem; font-size: 1.25rem; }
.team-claim p  { margin: 0; color: #757575; }

/* Optional: etwas Abstand zwischen den Feature-Blöcken im letzten Abschnitt */
.features .eyebrow { margin-bottom: .5rem; }

@media (max-width: 768px) {
  /* Reihenfolge nur für Sektionen mit service--swap drehen */
  .service .row { display: flex; flex-direction: column; }
  .service--swap .row > .col-3:first-child { order: 2; } /* Icon/Foto unten */
  .service--swap .row > .col-3:last-child  { order: 1; } /* Text oben */
}

/* (optional) FAQ-Headlines etwas Abstand */
.service h5 { margin: 1rem 0 .25rem; font-size: 1.125rem; }

/* === Aktuelles (Listing) === */
.aktuelles-gray { background: #FAFAFA; }

/* Icon-Paneel wie Service-Icon, etwas kompakter */
.aktuelles-icon {
  min-height: 260px;
  border-radius: 4px;
  background: #e9e9e9;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aktuelles-icon i { font-size: 4rem; color: #4169E1; }



/* === Kontaktformular === */
#kontaktformular .kontakt-form {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.25rem;
  display: grid;
  gap: .6rem;
}

#kontaktformular .kontakt-form label {
  font-weight: 700;
  color: #1E1E1E;
  margin-top: .25rem;
}

#kontaktformular .kontakt-form input,
#kontaktformular .kontakt-form textarea {
  width: 100%;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: .75rem 1rem;
  font: inherit;
  color: #1E1E1E;
  background: #FAFAFA;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#kontaktformular .kontakt-form input:focus,
#kontaktformular .kontakt-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65,105,225,.18);
}

#kontaktformular .kontakt-form button.contact-cta-button {
  margin-top: .5rem;
}

/* rechte Spalte: Icons + Text */
#kontaktformular .row p {
  margin: 0 0 .5rem;
  color: #757575;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#kontaktformular .row p i { color: #4169E1; }

/* Mobile: etwas Luft zwischen Spalten */
@media (max-width: 768px) {
  #kontaktformular .col-3 + .col-3 { margin-top: 1rem; }
}

/* === Footer === */
.site-footer{
  background: #1E1E1E;
  color: #FAFAFA;
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .eyebrow{ color: #BDBDBD; }

.footer-logo img{ height: 100px; width: auto; display: block; margin-bottom: .5rem; }
.footer-tagline{ margin: 0 0 1rem; color: #FAFAFA; opacity: .9; }

.footer-social{ display: flex; gap: .5rem; }
.footer-social a{
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; color: #fff; text-decoration: none;
}
.footer-social a:hover{ background: #4169E1; }

.footer-nav, .footer-contact{ list-style: none; margin: .25rem 0 0; padding: 0; }
.footer-nav li, .footer-contact li{ margin: .35rem 0; }

.site-footer a:not(.footer-cta){
  color: #FAFAFA; text-decoration: none; opacity: .9;
}
.site-footer a:not(.footer-cta):hover{ opacity: 1; }

.footer-contact i{ color: #4169E1; margin-right: .35rem; }

/* Bottom line */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
   padding-top: .75rem;
}
.footer-bottom small{ color: #BDBDBD; }
.footer-legal{ text-align: right; }
.footer-legal a{ color: #BDBDBD; margin-left: .5rem; }
.footer-legal a:hover{ color: #fff; }

/* Mobile spacing */
@media (max-width: 768px){
  .footer-top .col-2 + .col-2{ margin-top: 1rem; }
  .footer-legal{ text-align: left; margin-top: .5rem; }
}

/* Footer – mittlere Spalte HORIZONTAL zentrieren */
.site-footer .footer-top [aria-label="Footer-Navigation"]{
  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- horizontal zentriert */
  text-align: center;    /* <-- Text/Links zentriert */
}

/* UL mitziehen (saubere Mitte, egal wie breit die Links sind) */
.site-footer .footer-top [aria-label="Footer-Navigation"] .footer-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px){
  .site-footer .footer-top [aria-label="Footer-Navigation"]{
    align-items: flex-start;
    text-align: left;
  }
}


/* 

=== GRID-System Sichtbarkeit) === 

.border, .border * {
    border: 1px solid #91C4FF;
}

[class*='col-'] {
    background-color: #BFDDFF;
}

p {
    background-color: #91C4FF;
    padding: 0;
    margin: 0;
    color: #fff;
    text-align: center;
}

*/


/* === GRID-System === */

.container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    padding: .8rem;
}

.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-6 { width: 100%;    }

/* === Wichtige Breakpoints ===

480 Pixel   (iPhone Querformat)
768 Pixel   (iPad Hochformat)
1024 Pixel  (iPad Querformat)

*/

@media (max-width: 1024px) {

    .col-1 { width: 33.333%; }
}

@media (max-width: 768px) {
    .col-1 { width: 50%;  }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
}

@media (max-width: 480px) {
    .col-1 { width: 100%;  }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
}



/* Mail-Link im Karriere-Block – ohne Strich */
#karriere .mail-link{
  color: #4169E1;
  font-weight: 700;
  text-decoration: none;   /* kein Unterstrich */
  transition: color .15s ease;
}

#karriere .mail-link:hover{
  color: #3458cf;          /* nur Farbwechsel beim Hover */
}

#karriere .mail-link:focus-visible{
  outline: 2px solid #3458cf;
  outline-offset: 2px;
}


/* 1) Floats sicher „einsperren“, ohne Box-Shadows zu kappen */
.row{ display: flow-root; } /* moderner Ersatz für clearfix */

/* 2) Container und einige Hauptbereiche clippen Überhang im px-Bereich */
.container,
.header-nav,
.contact-cta,
.site-footer{
  overflow-x: clip; /* alternativ: hidden, wenn sehr altbackene Browser unterstützt werden sollen */
}


/* 4) Lange, untrennbare Tokens (z. B. sehr lange Wörter/Links) brechen weich */
body{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Falls doch irgendwo 100vw hereinschneit (Plugin/Inline-Style etc.) – neutralisieren */
[class*="vw-guard"]{ width: 100% !important; } /* optionaler Haken für künftige Elemente */


.map-consent{
  position: relative;
  width: 100%;
  height: 320px;            /* kannst du anpassen */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: #e9e9e9;
}
.map-consent .map-preview{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.95) contrast(.98);
}
.map-consent .map-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(30,30,30,.6);   /* halbtransparent dunkel */
  padding: 1rem;
  text-align: center;
  color: #fff;
}
.map-consent .map-hint{
  max-width: 56ch; margin: 0 0 .6rem; line-height: 1.5;
  color: #FAFAFA;
}
.map-consent .map-btn{            /* erbt Look von .contact-cta-button */
  cursor: pointer;
}
.map-consent .map-open-extern{
  margin: .5rem 0 0; font-size: .9rem; opacity: .95;
}
.map-consent .map-open-extern a{ color: #fff; text-decoration: underline; }
.map-consent iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  display: block;
}
@media (max-width: 768px){
  .map-consent{ height: 260px; }
}

/* Hero: Badge-Leiste + CTA-Abstand */
.hero-badges{
  list-style:none; margin:.6rem 0 .8rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.hero-badges li{
  display:flex; align-items:center; gap:.35rem;
  background: rgba(250,250,250,.12);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff; padding:.35rem .6rem; border-radius:999px;
  backdrop-filter: blur(2px);
}
.hero-badges i{ font-size:.95rem; }
.hero-cta{ margin-top:.2rem; }

/* Values-Grid: noch etwas „cardiger“ + Platz für kurzen Text */
.values-grid--tall .value-box{ padding:1rem; }
.values-grid--tall .value-box p{
  margin:.35rem 0 0; color:#757575; font-size:.95rem;
}

/* Teamkarten – Rollenbadge + LinkedIn rechts oben */
.team-card{ position:relative; }
.team-card .team-meta{
  position: absolute; left: .75rem; right: .75rem; top: .75rem;
  display:flex; justify-content:space-between; align-items:center;
}
.role-badge{
  background:#4169E1; color:#fff; font-weight:700;
  padding:.18rem .5rem; border-radius:.35rem; font-size:.82rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: rgba(30,30,30,.6); color:#fff; text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.social-link:hover{ transform: translateY(-2px); background:#1E1E1E; }



/* Kleinere Politur der Feature-Zeilen */
.features .feature-text p{ color:#616161; }

.download-card {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.download-card h4 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.download-card p {
  margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;
}

.download-card .service-button {
  align-self: flex-start;
  margin-top: auto;
}

/* Micro-KPI Chips (unterhalb der Texte) */
.kpi-chips{
  list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff;
  color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.35rem .65rem;
}

/* kleinem Viewport: etwas Luft nach oben */
@media (max-width:768px){
  .kpi-chips{ margin-top:.4rem; }
}

/* FAQ – Grid & Cards (ohne JS, mit <details>) */
.faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 768px){
  .faq-grid{ grid-template-columns: 1fr; }
}

.faq-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.faq-item > summary{
  list-style: none; /* Safari */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .9rem 1rem;
  cursor: pointer;
  font-weight: 800;
  color: #1E1E1E;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary em{
  font-style: normal; font-weight: 600; color: #757575; font-size: .95rem;
}

/* Pfeil */
.faq-item > summary::after{
  content: "▾";
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .15s ease;
  color: #4169E1;
}
.faq-item[open] > summary::after{ transform: rotate(-180deg); }

/* Content */
.faq-content{
  padding: 0 .95rem 1rem;
  color: #757575;
  line-height: 1.55;
  border-top: 1px solid #f0f0f0;
}
.faq-content p{ margin: .75rem 0; }
.faq-bullets{ margin: .25rem 0 0; padding: 0 0 0 1.1rem; }
.faq-bullets li{ margin: .25rem 0; }

/* CTA unten */
.faq-cta{
  display: flex;
  gap: .9rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Reuse: KPI Chips (falls nicht schon vorhanden) */
.kpi-chips{
  list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff;
  color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.35rem .65rem;
}

/* Kontakt – dezente Alerts */
.alert-success{
  background:#1e1e1e; border-radius:8px; padding:.75rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Form: Zweierspalten auf Desktop */
.kontakt-form .input-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
}
.kontakt-form .field{ display:flex; flex-direction:column; gap:.25rem; }
.kontakt-form select{ 
  width:100%; border:1px solid #e3e3e3; border-radius:6px; padding:.75rem 1rem; 
  background:#FAFAFA; color:#1E1E1E; font:inherit; 
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.kontakt-form select:focus{ outline:none; background:#fff; border-color:#4169E1; box-shadow:0 0 0 3px rgba(65,105,225,.18); }

.kontakt-form .checkbox{
  display:flex; align-items:flex-start; gap:.5rem; margin:.35rem 0 .6rem; color:#757575;
}

.inline-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

@media (max-width:768px){
  .kontakt-form .input-row{ grid-template-columns:1fr; }
}

/* Kontakt-Karten rechts */
.contact-card{
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:1rem 1.1rem; margin-bottom:1rem;
}
.quick-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 .4rem; }
.btn-outline{
  background:transparent; color:#1E1E1E; border:1px solid #1E1E1E;
  padding:.85rem 1.2rem; border-radius:.25rem; font-weight:700; text-decoration:none;
}
.btn-outline:hover{ background:#1E1E1E; color:#fff; }

.contact-lines p{ margin:.35rem 0; color:#757575; display:flex; gap:.5rem; align-items:center; }
.contact-lines i{ color:#4169E1; }

/* Chips wiederverwenden */
.kpi-chips{ list-style:none; margin:.1rem 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff; color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.3rem .6rem;
}

/* Ansprechpartner */
.contact-person{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0 0; }
.contact-person img{
  width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.contact-person small{ display:block; color:#757575; }

/* Karte in Card */
.map-card .map-title{ margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* Kontakt: zwei Spalten hübsch nebeneinander, Map optisch wie hoch wie das Formular */
.contact-card { height: 100%; }

/* Kartenhöhe auf Desktop großzügig, mobil kompakter */
.contact-map { height: 560px; }            /* Desktop-Zielhöhe */
.contact-map iframe,
.contact-map .map-preview { height: 100%; }

@media (max-width: 1024px){
  .contact-map { height: 480px; }
}
@media (max-width: 768px){
  .contact-map { height: 320px; }          /* unter dem Formular */
}

/* Optional: kleinere Überschrift innerhalb der Map-Card */
.map-card .map-title { margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* Kontakt-Row: Auf Desktop sicher zweispaltig nebeneinander */
@media (min-width: 769px){
  .row-contact{
    display: flex;
    gap: 1rem;               /* optischer Abstand zwischen Spalten */
  }
  .row-contact > .col-3{
    float: none;             /* Floats deaktivieren zugunsten von Flex */
    width: 50%;              /* exakt halbe Breite */
  }
  .contact-card{ height: 100%; display: flex; flex-direction: column; }
  .contact-map{ flex: 1; min-height: 560px; }  /* passt sich an, aber mit Mindesthöhe */
  .contact-map iframe,
  .contact-map .map-preview{ height: 100%; }
}

/* Tablet & Mobile: Standard-Stack beibehalten */
@media (max-width: 768px){
  .contact-map{ height: 320px; }
}

/* Headline in der Map-Card etwas kompakter */
.map-card .map-title{ margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* --- Kontakt: hübsche Checkbox --- */
.kontakt-form .checkbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: .2rem 0 0;
  border: 2px solid #1E1E1E;
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex: 0 0 20px;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.kontakt-form .checkbox input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,105,225,.25);
  border-color: #4169E1;
}

/* Häkchen */
.kontakt-form .checkbox input[type="checkbox"]::after{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  clip-path: polygon(14% 52%, 0 66%, 42% 100%, 100% 24%, 84% 10%, 40% 70%);
  background: #1E1E1E;
}
.kontakt-form .checkbox input[type="checkbox"]:checked{
  background: #FAFAFA;
  border-color: #1E1E1E;
}
.kontakt-form .checkbox input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* Text neben der Checkbox */
.kontakt-form .checkbox.agree{
  align-items: flex-start;
  line-height: 1.5;
  color: #4A4A4A;
}

/* Keine hässlichen Wortbrüche im Einwilligungstext/Link */
.kontakt-form .checkbox.agree{
  overflow-wrap: normal;
  word-break: normal;
}
.kontakt-form .checkbox.agree a{
  white-space: nowrap;          /* „Datenschutzerklärung“ bleibt zusammen */
  color: #4169E1;
  text-decoration: underline;
}
.kontakt-form .checkbox.agree a:hover{ color: #3458cf; }

/* --- Dark-Button wie auf anderen Seiten --- */
.btn-dark{
  background: #1E1E1E !important;
  color: #fff !important;
  border: 2px solid #1E1E1E;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.btn-dark:hover{
  background: #3458cf !important;     /* dein bewährter Hover */
  border-color: #3458cf;
}
.btn-dark:focus-visible{
  outline: 3px solid rgba(65,105,225,.35);
  outline-offset: 2px;
}

/* Abstand oberhalb des Button-Bereichs etwas erhöhen */
.kontakt-form .inline-actions{ margin-top: .3rem; }

.contact-cta-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
}

/* Hinweis/Alert – abgestimmt auf Cards/Buttons */
.alert{
  display:flex; align-items:flex-start; gap:.6rem;
  background:#1E1E1E; color:#fff;
  border-radius:8px; padding:.85rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.06);
}
.alert__icon{
  font-size:1.15rem; line-height:1; color:#4169E1; /* Markenblau */
  margin-top:.15rem; flex:0 0 auto;
}
.alert__body{ line-height:1.5; }
.alert__body strong{ font-weight:800; margin-right:.25rem; color:#fff; }
.alert__close{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  font-size:1.25rem; line-height:1; color:#BDBDBD; padding:.1rem .25rem; border-radius:6px;
}
.alert__close:hover{ color:#fff; background:rgba(255,255,255,.06); }
.alert__close:focus-visible{
  outline:2px solid #3458cf; outline-offset:2px;
}

/* sanftes Einblenden */
@keyframes alertFadeIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.alert{ animation: alertFadeIn .18s ease-out; }

/* Erfolgs-Alert */
.alert-success {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  margin: 1rem 0;
  padding: 0.85rem 1rem;

  background: #f0f8f5;               /* sanftes Grün */
  border: 1px solid #c6ebd6;
  color: #215732;                    /* dunkler Grünton */

  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);

  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-success i {
  color: #2e7d32;                    /* grünes Check-Icon */
  font-size: 1.2rem;
  flex-shrink: 0;
}

.alert-success strong {
  font-weight: 700;
  margin-right: 0.25rem;
  color: #215732;
}

/* sanftes Einblenden */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert-success {
  animation: fadeSlideIn .25s ease-out;
}

/* Karte: bessere Lesbarkeit im Overlay */
.map-consent .map-overlay{
  /* dunkler & ruhiger, optional leichter Blur für mehr Kontrast */
  background: rgba(20,20,20,.72);
  backdrop-filter: blur(1.5px);
  color: #fff;
}

/* Hinweistext im Overlay */
.map-consent .map-hint{
  color:#fff;
  font-weight:600;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Links im Overlay (weiß + klar unterstrichen) */
.map-consent .map-hint a,
.map-consent .map-open-extern a{
  color:#fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:700;
}
.map-consent .map-hint a:hover,
.map-consent .map-open-extern a:hover{
  opacity:.9;
}

/* Extern öffnen-Zeile ebenfalls gut lesbar */
.map-consent .map-open-extern{
  color:#fff;
  opacity:.95;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Button auf dem Overlay: mehr Kontrast/Fokus */
.map-consent .map-btn{
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.map-consent .map-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* Vorschau etwas abdunkeln, damit Text besser wirkt */
.map-consent .map-preview{
  filter: brightness(.6) contrast(.98) saturate(.95);
}

/* ab sehr kleinen Viewports: Text leicht größer */
@media (max-width: 420px){
  .map-consent .map-hint{ font-size: .98rem; }
}

/* Dropzone */
.file-drop{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; min-height:140px; padding:1rem 1.25rem;
  border:2px dashed #d5d9e4; border-radius:16px;
  background:#f8fafc; cursor:pointer; text-align:center;
  transition:.2s ease;
}
.file-drop i{ font-size:1.1rem; opacity:.85; }
.file-drop.is-dragover{ background:#eef2ff; border-color:#3b82f6; }

.file-list{ margin:.5rem 0 0; padding:0; list-style:none; }
.file-list li{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.5rem; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:.45rem .6rem;
}
.file-list li .size{ margin-left:auto; opacity:.7; font-variant-numeric: tabular-nums; }
.file-list li.invalid{ border-color:#ef4444; background:#fff7f7; }

.form-hint{ font-size:.92rem; color:#6b7280; }

/* Optional: Error-Alert analog zu success */
.alert-error{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.9rem 1rem; margin:1rem 0; border-radius:12px;
  background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
  box-shadow:0 6px 18px rgba(148,27,27,.06);
}
.alert-error i{ margin-top:.1rem; }

html, body {
  overflow-x: hidden;
  overflow-y: auto;
}

:root { --header-h: 120px; } /* hast du schon – hier nur zur Vollständigkeit */




/* Unsere Identität (angepasst an Startseite/Über-uns Stil) */
.identity {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.identity-intro {
  margin: .5rem 0 1.5rem;
  max-width: 60ch;
  color: #3a3a3a;
}

.identity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

.identity-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}

.identity-card h4 {
  margin: .25rem 0 .5rem;
  font-size: 1.125rem;
}

.identity-card p {
  margin: 0;
  color: #2b2b2b;
}

.identity-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  margin-bottom: .5rem;
  background: #f2f6f4; /* sanftes Grün-Grau, harmoniert mit "service-gray" */
  font-size: 1rem;
}

/* kleine Akzentkanten pro Karte (wie subtile Brandlines) */
.identity-card--vision::before,
.identity-card--mission::before,
.identity-card--values::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
}


/* Checkliste in Mission */
.identity-list {
  list-style: none;
  padding: .5rem 0 0;
  margin: .5rem 0 0;
}
.identity-list li {
  display: flex; gap: .5rem;
  align-items: baseline;
  margin: .25rem 0;

}
.identity-list i { font-size: .9rem; }

/* Werte-Pills */
.values-pills {
  display: flex; flex-wrap: wrap;
  gap: .5rem; margin: .25rem 0 .5rem;
}
.pill {
  display: inline-block;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: #f6f6f6;

  font-size: .875rem;
}

.identity-muted {
  color: #616161;
  margin-top: .25rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .identity-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .identity-grid { grid-template-columns: 1fr; }
  .identity { padding-top: 2rem; padding-bottom: 2rem; }
}

/* --- Identity: runde Icon-Kugeln wie Startseite --- */
.identity-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #ffffff;

  margin-bottom: .75rem;
}
.identity-icon i {
  font-size: 1.2rem;
  color: #1E1E1E; /* Icon-Farbe wie Startseiten-Feature */
}

/* --- Identity: oberer Rand in Dunkelgrau --- */
.identity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;

}

/* Oberer Rand der Identity-Cards in Dunkelgrau */
.service-hero .identity-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:#1E1E1E;
}

/* Desktop bleibt 3er-Grid */
.service-hero .identity-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.25rem;
  margin-top:1rem;
  text-align:left; /* bricht die Zentrierung aus intro-container */
}

/* Mobil: 1 Card pro Viewport, per Swipe; nur für diese Sektion */
@media (max-width: 768px){
  .service-hero .identity-grid{
    /* Grid -> horizontaler Scroller */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 2rem); /* genau eine Karte sichtbar */
    overflow-x: auto;
    gap: 1rem;

    /* angenehme Seitengassen + randloser Look im Container */
    padding: 0 1rem 1rem;
    margin: 0 -1rem;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .service-hero .identity-grid::-webkit-scrollbar{ display:none; }
  .service-hero .identity-grid{ scrollbar-width: none; }

  .service-hero .identity-card{
    scroll-snap-align: start;
    min-width: 0; /* verhindert unerwünschtes Überlaufen */
  }
}

/* === Farben === */

/*

Blau:           #4169E1
Hellgrau:       #FAFAFA
Mittelgrau:     #757575
Dunkelgrau:     #1E1E1E

*/

/* === Fonts === */

/* manrope-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/webfonts/manrope-v19-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/webfonts/manrope-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/webfonts/manrope-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/webfonts/manrope-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/webfonts/manrope-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/webfonts/manrope-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/webfonts/manrope-v19-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* === Global === */

html {
    font-size: 16px;
}

body {
    margin: 0;
    font-family:  'Manrope', 'Helvetica Neue', 'Arial', sans-serif;
}

* {
    box-sizing: border-box;
}

section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  section {
  padding-top: .7rem;
  padding-bottom: .7rem;
}
}


/* === Generelles === */

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.active {
    background-color: #4169E1 !important;
}

.intro-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  color: #1E1E1E;
  text-align: center;
}

.intro-container > h1 {
  font-size: 2.3rem;
}

.intro-container > p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #757575;
}


/* Responsiv */
@media (max-width: 768px){
  .intro-container{ width: 95%; }
  .intro-container h1{ font-size: 1.4rem;}
  .intro-container p { font-size: 1rem; text-align: left;}
}













/* === Allgemeiner Header-Banner Background === */

.header-banner {
    background: url(../img/header-background.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.59375%;
    background-size: contain;
    overflow: hidden;
}

.header-banner-ueber-uns {
    background: url(../img/header-ueber-uns.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4525%;
    background-size: contain;
}

.header-banner-leistungen {
    background: url(../img/header-leistungen.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.7554%;
    background-size: contain;
}

.header-banner-aktuelles {
    background: url(../img/header-aktuelles.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4375%;
    background-size: contain;
}

.header-banner-kontakt {
    background: url(../img/header-kontakt.jpg) no-repeat;
    width: 100%;
    height: 0;
    padding-top: 38.4375%;
    background-size: contain;
}

/* === Allgemeiner Overlay für dem Header-Banner === */

.header-banner { position: relative; }
.header-banner-ueber-uns { position: relative; }
.header-banner-leistungen { position: relative; }
.header-banner-aktuelles { position: relative; }
.header-banner-kontakt { position: relative; }

/* === Allgemeiner Slogan-Overlay === */
.slogan {
  position: absolute;
  left: 0;                 /* entspricht deiner .container Breite (95%) */
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  color: white;
  width: min(980px, 100%);           /* angenehme Zeilenlänge */
  margin: 0;
}

/* === Allgemeiner Slogan-Top === */

.slogan-top {
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
}

/* === Allgemeiner Slogan-Bottom === */

.slogan-bottom {
  font-weight: 500;
  font-size: 1.125rem;   /* etwas kleiner als .slogan-top */
  color: white;        /* dezenter als der Hauptclaim */
  margin: .35rem 0 .9rem;/* Luft zum Button darunter */
}

/* === Allgemeine Anpassung Header (Mobil) === */

@media (max-width: 768px){
  .slogan { top: auto; bottom: 8%; transform: none; }
  .slogan-top { font-size: 1.45rem; }
  .slogan-bottom { font-size: 1rem; margin: .3rem 0 .8rem;}
}

.slogan-panel{ position: relative; z-index: 1;}

.slogan-panel::before{
  content: "";
  position: absolute;
  left: 50%;
  right: 0;
  top: -0.6rem;            /* Abstand oben */
  bottom: -0.6rem;         /* Abstand unten */
  background: rgba(30, 30, 30, .8);  /* gleiche Farbe wie Desktop */
  z-index: -1;             /* hinter den Text */
  width: 200vw;
  transform: translateX(-50%);
}

/* === Container-Variable + Ausrichtung der Slogan-Box === */
:root{
  --container-w: 95%;
}

/* Falls noch nicht so: Container auf Variable umstellen */
.container{
  width: var(--container-w);
}

/* Der Slogan startet am linken Rand des Containers */
.slogan{
  left: calc((100% - var(--container-w)) / 2) !important;
  right: auto;
}

.header-banner .container {
  overflow-x: visible;
}

.slogan-panel {
  position: relative;
  overflow-x: visible !important;
  z-index: 0;
}

/* === Leistungen (Startseite) === */

.leistungen-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}

.leistungen-card {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.leistungen-card h2 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.leistungen-card p {
  margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;
}

.leistungen-card .service-button {
  align-self: flex-start;
  margin-top: auto;
}
@media (max-width: 768px) {
  .leistungen-card {
    text-align: center;
  }

  .leistungen-card .service-button {
    margin-left: auto;
    margin-right: auto;
  }
}




/* Icon-Box */
.feature-icon {
  flex: 0 0 56px;
  width: 56px;               /* explizit setzen für perfekte Kreise */
  height: 56px;
  border-radius: 50%;        /* rund */
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e9e9e9;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
}
.feature-icon i { font-size: 1.75rem; color: #4169E1; }

/* Text */
.feature-text h3 {
  margin: 0 0 .25rem;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #1E1E1E;
}
.feature-text p {
  margin: 0;
  color: #757575;
  line-height: 1.5;
}

.service-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}


/* === Über uns (Startseite) === */
.about {
  background: #FAFAFA;
  padding: 3rem 0;
  color: #1E1E1E;
}

.about .eyebrow {
  margin: 0 0 .25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #757575;
  font-size: .875rem;
}

.about-title { margin: 0 0 1rem; line-height: 1.2; font-size: 2rem; color: #1E1E1E; text-align: center;}
.about-text  { 
    margin: 0 0 1rem;
    color: #757575; 
}

.about-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.about-list li { 
    position: relative;
    padding-left: 1.4rem;
    margin: .4rem 0;
    color: #757575;
}

.about-list li::before {
    content: "✓";               /* Standard-HTML-Zeichen */
    position: absolute;
    left: 0; top: 0;
    color: #4169E1;
    font-weight: 700;
    line-height: 1.4;
}

.about-list i  { color: #4169E1; line-height: 1.4; margin-top: .15rem; }

.about-button {
  display: inline-block;
  background: #1E1E1E;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .85rem 1.2rem;
  border-radius: .25rem;
}
.about-button:hover { background: #3458cf; }

.about-photo {
  min-height: 360px;
  background: #e9e9e9 center/cover no-repeat;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Stack unter 768px – dein Grid macht col-3 ohnehin 100% */
@media (max-width: 768px) {
  .about-photo { min-height: 260px; margin-top: 1rem; }
}

.kpi-card {
  background: #FAFAFA;                  /* wie die About-/News-Cards */
  border-radius: 8px;                   /* gleiche Rundung */
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* Card-Shadow wie News */
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.kpi-card h4 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.kpi-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.kpi-list li {
  margin: .4rem 0;
  color: #757575;
  line-height: 1.4;
  position: relative;
  padding-left: 1.4rem;
}

.kpi-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #4169E1;       /* Markenblau */
  font-size: 1.2rem;
  line-height: 1;
}

.kpi-list strong {
  color: #1E1E1E;
  font-weight: 800;
  margin-right: .25rem;
}

.link-quiet {
  margin-top: auto;
  font-weight: 600;
  color: #4169E1;
  text-decoration: none;
}

.link-quiet:hover {
  text-decoration: underline;
  color: #3458cf;       /* Hover wie Buttons */
}

.process-steps{list-style:none;padding:0;margin:.5rem 0 0}
.process-steps li{display:flex;align-items:center;gap:.5rem;margin:.35rem 0}
.process-steps li::before{content:"";width:10px;height:10px;border-radius:50%;background:#0a7a5c;flex:0 0 10px}
.process-steps li span{flex:1}

/* === Services – Stil wie „Über uns“ === */
.service {
  padding: 3rem 0;
  color: #1E1E1E;
  background: #fff;
}
.service-gray { background: #FAFAFA; }

.eyebrow {                      /* auch im About verwendbar */
  margin: 0 0 .25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #757575;
  font-size: .875rem;
}

.service-title {
  margin: 0 0 1rem;
  line-height: 1.2;
  font-size: 2rem;
}

.service p { margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;}

.service-button {
  display: inline-flex;      /* statt inline-block */
  align-items: center;
  justify-content: center;
  gap: .35rem;               /* optional, falls später Icons dazukommen */
  background: #1E1E1E;
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.2rem;
  border-radius: .25rem;
  line-height: 1;            /* gleiche Höhe */
  cursor: pointer;
  text-decoration: none !important;
}
.service-button:hover { background: #3458cf; }

/* already have .service-button styles */
.service-button[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
  pointer-events: none; /* blockt Klicks */
}



/* Tastaturfokus sichtbar, konsistent für beide */
.service-button:focus-visible {
  outline: 2px solid #3458cf;
  outline-offset: 2px;
}

/* Deaktivierter Zustand (für Submit bis alles valide ist) */
.service-button:disabled,
.service-button[disabled] {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
}

/* Icon-Panel rechts/links */
.service-icon {
  min-height: 360px;
  border-radius: 4px;
  background: #e9e9e9;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: flex;               /* zentriert das Icon */
  align-items: center;
  justify-content: center;
}
.service-icon i {
  font-size: 5rem;
  color: #4169E1;
}

/* Responsive – dein Grid setzt col-3 auf 100%, hier nur Feinschliff */
@media (max-width: 768px) {
  .service-icon { min-height: 220px; margin-top: 1rem; }
  .service .row { display: flex; flex-direction: column; }

  /* Nur beim zweiten Service-Block (direkt nach dem ersten):
     Bild/Platzhalter nach unten, Text nach oben */
  .service + .service .row > .col-3:first-child { order: 2; } /* Icon/Foto-Spalte */
  .service + .service .row > .col-3:last-child  { order: 1; } /* Text-Spalte */
}



/* === Features (2×4, Icon + Text) === */
.features { padding: 3rem 0; }
.features.service-gray { background: #FAFAFA; }

/* Jede Feature-Zeile: Icon links, Text rechts */
.features .col-3 > div {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem 0;
  border-bottom: 1px solid #eee;
}
.features .col-3 > div:last-child { border-bottom: 0; }

/* Responsive: unter 768px werden die col-3 bereits zu 100%,
   wir geben nur etwas Luft zwischen den beiden Spalten */
@media (max-width: 768px) {
  .features .row > .col-3 + .col-3 { margin-top: 1.25rem; }
}

/* Liste mit runden, blauen Check-Badges */
.feature-list{
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: grid;
  gap: .45rem;                 /* Abstand zwischen den Punkten */
}

.feature-list li{
  position: relative;
  padding-left: 1.45rem;       /* Platz für Badge */
  line-height: 1.6;
  color: #757575;
}

/* Badge: klein, sauber vertikal zentriert */
.feature-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: .82rem;                  /* vertikal zur ersten Textzeile ausgerichtet */
  transform: translateY(-50%);
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .6rem;            /* Checkmark-Größe */
  font-weight: 800;
  color: #fff;
  background: #4169E1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

.process-card{
  background:#FAFAFA;
  border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:1.25rem 1.5rem;
  display:flex;
  flex-direction:column;
  height:100%;
}
.process-card h4{
  margin:0 0 .75rem;
  font-size:1.25rem;
  font-weight:700;
  color:#1E1E1E;
}

/* Nummerierte Abfolge mit vertikaler Linie */
.process-steps{
  counter-reset: step;
  list-style:none;
  margin:.25rem 0 1rem;
  padding:0 0 0 .25rem; /* leichte Einrückung */
  position:relative;
}
.process-steps li{
  counter-increment: step;
  position:relative;
  padding-left:2.25rem;       /* Platz für Badge */
  margin:.55rem 0 .55rem;
  color:#757575;
  line-height:1.45;
}
/* Verbindungslinie (vertikal) */
.process-steps li::before{
  content: counter(step);
  position:absolute;
  left:0;
  top:.1rem;
  width:1.45rem;
  height:1.45rem;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:.9rem;
  color:#fff;
  background:#4169E1;        /* Markenblau */
  box-shadow:0 1px 3px rgba(0,0,0,.12);
  z-index:1;
}
.process-steps li::after{
  content:"";
  position:absolute;
  left:.71rem;               /* Mitte des Kreises */
  top:1.45rem;
  bottom:-.65rem;            /* kleine Überlappung nach unten */
  width:2px;
  background:linear-gradient(
    to bottom,
    rgba(65,105,225,.5),
    rgba(65,105,225,.16)
  );
}
.process-steps li:last-child::after{ display:none; }

.process-card .link-quiet{
  margin-top:auto;
  font-weight:600;
  color:#4169E1;
  text-decoration:none;
}
.process-card .link-quiet:hover{ color:#3458cf; text-decoration:underline; }

/* Mobile: etwas dichter und ohne lange Linie-Überhänge */
@media (max-width:768px){
  .process-steps li{ margin:.45rem 0 .45rem; }
  .process-steps li::after{ bottom:-.4rem; }
}

.process-card .service-button{
  margin-top: .5rem;      /* etwas Luft über dem Button */
  align-self: flex-start; /* bleibt linksbündig wie deine anderen CTAs */
}
/* Wenn du ihn in der Karte lieber über die volle Breite willst: */
/* .process-card .service-button{ width: 100%; text-align: center; } */





/* Zweizeiler */
.feature-intro{
  margin: .25rem 0 .5rem;
  color: #4A4A4A;
  line-height: 1.6;
}

/* Kartenlook für Pakete – nutzt vorhandene Typo/Buttons */
.package-card{
  background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:1rem; height:100%; display:flex; flex-direction:column; gap:.6rem;
}
.package-title{ margin:.25rem 0 0; font-size:1.25rem; line-height:1.3; color:#1E1E1E; }
.package-sub{ margin:0; color:#757575; }
.package-badge{
  align-self:flex-start; background:#4169E1; color:#fff; font-weight:700; 
  padding:.2rem .5rem; border-radius:.35rem; font-size:.8rem;
}
.package-reco{ outline:2px solid rgba(65,105,225,.25); }
.package-card .service-button{ margin-top:auto; }

/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:2000; }
.modal[aria-hidden="false"]{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); }
.modal-dialog{
  position:relative; margin:6vh auto; max-width:720px;
  background:#fff; border-radius:8px; box-shadow:0 20px 40px rgba(0,0,0,.2);
  padding:1rem 1.25rem;
}
.modal-close{ position:absolute; right:.5rem; top:.5rem; background:transparent; border:0;
  font-size:1.75rem; line-height:1; color:#757575; cursor:pointer; }
.modal-hint{ margin:.25rem 0 1rem; color:#757575; }
.modal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.field-full{ grid-column:1 / -1; }
.modal-actions{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:.75rem; }
.btn-secondary{ background:#1E1E1E; } .btn-secondary:hover{ background:#3458cf; }
@media (max-width:768px){ .modal-dialog{ margin:8vh .75rem; } .modal-grid{ grid-template-columns:1fr; } }


/* === Aktuelles / News === */


.benefit-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .75rem;padding:0;list-style:none}
.benefit-tags li{background:#4169E1;border-radius:999px;padding:.35rem .7rem;font-weight:600; color: #fff;}

/* Karriere – Hero-Look */
.career-hero{
  background: linear-gradient(180deg, #FAFAFA 0%, #ffffff 100%);
  border-top: 1px solid #eee;
}
.career-title{
  margin: .25rem 0 .4rem;
  line-height: 1.15;
  font-size: 2.1rem;
  color: #1E1E1E;
}
.career-sub{
  margin: .25rem 0 .9rem;
  color: #4A4A4A;
  font-size: 1.05rem;
  line-height: 1.55;
}

/* kurze, lesbare Nutzenliste */
.career-highlights{
  list-style: none;
  margin: .4rem 0 1.1rem;
  padding: 0;
  display: grid;
  gap: .45rem;
  color: #757575;
}
.career-highlights li{
  position: relative;
  padding-left: 1.35rem;
}
.career-highlights li::before{
  content: "✓";
  position: absolute; left: 0; top: .08rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 800; color: #fff;
  background: #4169E1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* CTA-Gruppe */
.apply-buttons{
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.apply-buttons .service-button{ width: auto; } /* nur so breit wie nötig */

@media (max-width: 768px){
  .apply-buttons{
    justify-content: center;   /* zentriert den Inhalt horizontal */
  }
  .apply-buttons .service-button{
    margin-left: auto;         /* doppelt hält besser bei einzelnen Buttons */
    margin-right: auto;
  }
}

/* Benefits-Karte */
.benefits-card{
  background: #FAFAFA;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 1.1rem 1.2rem;
}
.benefits-title{
  margin: 0 0 .6rem;
  font-size: 1.25rem;
  color: #1E1E1E;
}

/* Grid mit Icon + Text */
.benefit-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem .9rem;
  margin: .4rem 0 .6rem;
}
@media (max-width: 768px){
  .benefit-grid{ grid-template-columns: 1fr; }
}

.benefit-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: .75rem .8rem;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: .6rem;
  align-items: start;
}
.benefit-item i{
  font-size: 1.35rem;
  color: #4169E1;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #F2F5FF;
}
.benefit-item h4{
  margin: .05rem 0 .15rem; font-size: 1.05rem; color: #1E1E1E;
}
.benefit-item p{
  margin: 0; color: #757575; line-height: 1.45; font-size: .98rem;
}

/* Tag-Leiste dezenter unter dem Grid */
.benefits-card .benefit-tags{
  margin-top: .6rem;
}

/* Mobile Feinschliff */
@media (max-width: 768px){
  .career-title{ font-size: 1.75rem; }
  .career-sub{ font-size: 1rem; }
}

/* === Kontakt-CTA === */
.contact-cta {
  background: #1E1E1E;
  color: #fff;
  padding: 3rem 0;
  text-align: center;
}
.contact-cta .container { max-width: 1000px; }

/* runder Icon-Badge */
.contact-cta-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #4169E1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.contact-cta-icon i { font-size: 2rem; color: #fff; }

/* Typo */
.contact-cta-title {
  margin: 0 auto .75rem;
  line-height: 1.2;
  font-size: 2rem;
  max-width: 28ch;
  color: #fff;
}
.contact-cta-text {
  margin: 0 auto 1.25rem;
  max-width: 65ch;
  color: #FAFAFA;
  line-height: 1.6;
}

/* Button – wie die übrigen CTAs */
.contact-cta-button {
  display: inline-block;
  background: #4169E1;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: .9rem 1.2rem;
  border-radius: .25rem;
}
.contact-cta-button:hover { background: #3458cf; }
.contact-cta-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Mobile Feinschliff */
@media (max-width: 768px) {
  .contact-cta-title { font-size: 1.75rem; }
  .contact-cta-icon { width: 72px; height: 72px; }
}

/* === Über-uns Seite: Values-Grid & Team-Claim === */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .8rem;
}
.value-box {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  text-align: center;
  padding: 1rem;
}
.value-box i { font-size: 1.75rem; color: #4169E1; display: block; margin-bottom: .35rem; }
.value-box h4 { margin: 0; font-size: 1rem; color: #1E1E1E; }

/* Team-Claim unter den Cards */
.team-claim {
  text-align: center;
  margin-top: 2rem;
  color: #1E1E1E;
}
.team-claim h4 { margin: 0 0 .25rem; font-size: 1.25rem; }
.team-claim p  { margin: 0; color: #757575; }

/* Optional: etwas Abstand zwischen den Feature-Blöcken im letzten Abschnitt */
.features .eyebrow { margin-bottom: .5rem; }

@media (max-width: 768px) {
  /* Reihenfolge nur für Sektionen mit service--swap drehen */
  .service .row { display: flex; flex-direction: column; }
  .service--swap .row > .col-3:first-child { order: 2; } /* Icon/Foto unten */
  .service--swap .row > .col-3:last-child  { order: 1; } /* Text oben */
}

/* (optional) FAQ-Headlines etwas Abstand */
.service h5 { margin: 1rem 0 .25rem; font-size: 1.125rem; }

/* === Aktuelles (Listing) === */
.aktuelles-gray { background: #FAFAFA; }

/* Icon-Paneel wie Service-Icon, etwas kompakter */
.aktuelles-icon {
  min-height: 260px;
  border-radius: 4px;
  background: #e9e9e9;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aktuelles-icon i { font-size: 4rem; color: #4169E1; }



/* === Kontaktformular === */
#kontaktformular .kontakt-form {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.25rem;
  display: grid;
  gap: .6rem;
}

#kontaktformular .kontakt-form label {
  font-weight: 700;
  color: #1E1E1E;
  margin-top: .25rem;
}

#kontaktformular .kontakt-form input,
#kontaktformular .kontakt-form textarea {
  width: 100%;
  border: 1px solid #e3e3e3;
  border-radius: 6px;
  padding: .75rem 1rem;
  font: inherit;
  color: #1E1E1E;
  background: #FAFAFA;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#kontaktformular .kontakt-form input:focus,
#kontaktformular .kontakt-form textarea:focus {
  outline: none;
  background: #fff;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65,105,225,.18);
}

#kontaktformular .kontakt-form button.contact-cta-button {
  margin-top: .5rem;
}

/* rechte Spalte: Icons + Text */
#kontaktformular .row p {
  margin: 0 0 .5rem;
  color: #757575;
  display: flex;
  align-items: center;
  gap: .5rem;
}
#kontaktformular .row p i { color: #4169E1; }

/* Mobile: etwas Luft zwischen Spalten */
@media (max-width: 768px) {
  #kontaktformular .col-3 + .col-3 { margin-top: 1rem; }
}

/* === Footer === */
.site-footer{
  background: #1E1E1E;
  color: #FAFAFA;
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .eyebrow{ color: #BDBDBD; }

.footer-logo img{ height: 100px; width: auto; display: block; margin-bottom: .5rem; }
.footer-tagline{ margin: 0 0 1rem; color: #FAFAFA; opacity: .9; }

.footer-social{ display: flex; gap: .5rem; }
.footer-social a{
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #2a2a2a; color: #fff; text-decoration: none;
}
.footer-social a:hover{ background: #4169E1; }

.footer-nav, .footer-contact{ list-style: none; margin: .25rem 0 0; padding: 0; }
.footer-nav li, .footer-contact li{ margin: .35rem 0; }

.site-footer a:not(.footer-cta){
  color: #FAFAFA; text-decoration: none; opacity: .9;
}
.site-footer a:not(.footer-cta):hover{ opacity: 1; }

.footer-contact i{ color: #4169E1; margin-right: .35rem; }

/* Bottom line */
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.08);
   padding-top: .75rem;
}
.footer-bottom small{ color: #BDBDBD; }
.footer-legal{ text-align: right; }
.footer-legal a{ color: #BDBDBD; margin-left: .5rem; }
.footer-legal a:hover{ color: #fff; }

/* Mobile spacing */
@media (max-width: 768px){
  .footer-top .col-2 + .col-2{ margin-top: 1rem; }
  .footer-legal{ text-align: left; margin-top: .5rem; }
}

/* Footer – mittlere Spalte HORIZONTAL zentrieren */
.site-footer .footer-top [aria-label="Footer-Navigation"]{
  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- horizontal zentriert */
  text-align: center;    /* <-- Text/Links zentriert */
}

/* UL mitziehen (saubere Mitte, egal wie breit die Links sind) */
.site-footer .footer-top [aria-label="Footer-Navigation"] .footer-nav{
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 768px){
  .site-footer .footer-top [aria-label="Footer-Navigation"]{
    align-items: flex-start;
    text-align: left;
  }
}


/* 

=== GRID-System Sichtbarkeit) === 

.border, .border * {
    border: 1px solid #91C4FF;
}

[class*='col-'] {
    background-color: #BFDDFF;
}

p {
    background-color: #91C4FF;
    padding: 0;
    margin: 0;
    color: #fff;
    text-align: center;
}

*/


/* === GRID-System === */

.container {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

.row::after {
    content: "";
    clear: both;
    display: block;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    padding: .8rem;
}

.col-1 { width: 16.666%; }
.col-2 { width: 33.333%; }
.col-3 { width: 50%;     }
.col-6 { width: 100%;    }

/* === Wichtige Breakpoints ===

480 Pixel   (iPhone Querformat)
768 Pixel   (iPad Hochformat)
1024 Pixel  (iPad Querformat)

*/

@media (max-width: 1024px) {

    .col-1 { width: 33.333%; }
}

@media (max-width: 768px) {
    .col-1 { width: 50%;  }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
}

@media (max-width: 480px) {
    .col-1 { width: 100%;  }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
}



/* Mail-Link im Karriere-Block – ohne Strich */
#karriere .mail-link{
  color: #4169E1;
  font-weight: 700;
  text-decoration: none;   /* kein Unterstrich */
  transition: color .15s ease;
}

#karriere .mail-link:hover{
  color: #3458cf;          /* nur Farbwechsel beim Hover */
}

#karriere .mail-link:focus-visible{
  outline: 2px solid #3458cf;
  outline-offset: 2px;
}



/* 1) Floats sicher „einsperren“, ohne Box-Shadows zu kappen */
.row{ display: flow-root; } /* moderner Ersatz für clearfix */


/* 4) Lange, untrennbare Tokens (z. B. sehr lange Wörter/Links) brechen weich */
body{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Falls doch irgendwo 100vw hereinschneit (Plugin/Inline-Style etc.) – neutralisieren */
[class*="vw-guard"]{ width: 100% !important; } /* optionaler Haken für künftige Elemente */


.map-consent{
  position: relative;
  width: 100%;
  height: 320px;            /* kannst du anpassen */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: #e9e9e9;
}
.map-consent .map-preview{
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.95) contrast(.98);
}
.map-consent .map-overlay{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(30,30,30,.6);   /* halbtransparent dunkel */
  padding: 1rem;
  text-align: center;
  color: #fff;
}
.map-consent .map-hint{
  max-width: 56ch; margin: 0 0 .6rem; line-height: 1.5;
  color: #FAFAFA;
}
.map-consent .map-btn{            /* erbt Look von .contact-cta-button */
  cursor: pointer;
}
.map-consent .map-open-extern{
  margin: .5rem 0 0; font-size: .9rem; opacity: .95;
}
.map-consent .map-open-extern a{ color: #fff; text-decoration: underline; }
.map-consent iframe{
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  display: block;
}
@media (max-width: 768px){
  .map-consent{ height: 260px; }
}

/* Hero: Badge-Leiste + CTA-Abstand */
.hero-badges{
  list-style:none; margin:.6rem 0 .8rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem;
}
.hero-badges li{
  display:flex; align-items:center; gap:.35rem;
  background: rgba(250,250,250,.12);
  border: 1px solid rgba(255,255,255,.22);
  color:#fff; padding:.35rem .6rem; border-radius:999px;
  backdrop-filter: blur(2px);
}
.hero-badges i{ font-size:.95rem; }
.hero-cta{ margin-top:.2rem; }

/* Values-Grid: noch etwas „cardiger“ + Platz für kurzen Text */
.values-grid--tall .value-box{ padding:1rem; }
.values-grid--tall .value-box p{
  margin:.35rem 0 0; color:#757575; font-size:.95rem;
}

/* Teamkarten – Rollenbadge + LinkedIn rechts oben */
.team-card{ position:relative; }
.team-card .team-meta{
  position: absolute; left: .75rem; right: .75rem; top: .75rem;
  display:flex; justify-content:space-between; align-items:center;
}
.role-badge{
  background:#4169E1; color:#fff; font-weight:700;
  padding:.18rem .5rem; border-radius:.35rem; font-size:.82rem;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: rgba(30,30,30,.6); color:#fff; text-decoration:none;
  transition: transform .12s ease, background .12s ease;
}
.social-link:hover{ transform: translateY(-2px); background:#1E1E1E; }



/* Kleinere Politur der Feature-Zeilen */
.features .feature-text p{ color:#616161; }

.download-card {
  background: #FAFAFA;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.download-card h4 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1E1E1E;
}

.download-card p {
  margin: 0 0 1rem;
  color: #757575;
  line-height: 1.5;
}

.download-card .service-button {
  align-self: flex-start;
  margin-top: auto;
}

/* Micro-KPI Chips (unterhalb der Texte) */
.kpi-chips{
  list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff;
  color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.35rem .65rem;
}

/* kleinem Viewport: etwas Luft nach oben */
@media (max-width:768px){
  .kpi-chips{ margin-top:.4rem; }
}

/* FAQ – Grid & Cards (ohne JS, mit <details>) */
.faq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 768px){
  .faq-grid{ grid-template-columns: 1fr; }
}

.faq-item{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  overflow: hidden;
}

.faq-item > summary{
  list-style: none; /* Safari */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding: .9rem 1rem;
  cursor: pointer;
  font-weight: 800;
  color: #1E1E1E;
}
.faq-item > summary::-webkit-details-marker{ display:none; }
.faq-item > summary em{
  font-style: normal; font-weight: 600; color: #757575; font-size: .95rem;
}

/* Pfeil */
.faq-item > summary::after{
  content: "▾";
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .15s ease;
  color: #4169E1;
}
.faq-item[open] > summary::after{ transform: rotate(-180deg); }

/* Content */
.faq-content{
  padding: 0 .95rem 1rem;
  color: #757575;
  line-height: 1.55;
  border-top: 1px solid #f0f0f0;
}
.faq-content p{ margin: .75rem 0; }
.faq-bullets{ margin: .25rem 0 0; padding: 0 0 0 1.1rem; }
.faq-bullets li{ margin: .25rem 0; }

/* CTA unten */
.faq-cta{
  display: flex;
  gap: .9rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Reuse: KPI Chips (falls nicht schon vorhanden) */
.kpi-chips{
  list-style:none; margin:.6rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff;
  color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.35rem .65rem;
}

/* Kontakt – dezente Alerts */
.alert-success{
  background:#1e1e1e; border-radius:8px; padding:.75rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* Form: Zweierspalten auf Desktop */
.kontakt-form .input-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
}
.kontakt-form .field{ display:flex; flex-direction:column; gap:.25rem; }
.kontakt-form select{ 
  width:100%; border:1px solid #e3e3e3; border-radius:6px; padding:.75rem 1rem; 
  background:#FAFAFA; color:#1E1E1E; font:inherit; 
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.kontakt-form select:focus{ outline:none; background:#fff; border-color:#4169E1; box-shadow:0 0 0 3px rgba(65,105,225,.18); }

.kontakt-form .checkbox{
  display:flex; align-items:flex-start; gap:.5rem; margin:.35rem 0 .6rem; color:#757575;
}

.inline-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

@media (max-width:768px){
  .kontakt-form .input-row{ grid-template-columns:1fr; }
}

/* Kontakt-Karten rechts */
.contact-card{
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:1rem 1.1rem; margin-bottom:1rem;
}
.quick-actions{ display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 .4rem; }
.btn-outline{
  background:transparent; color:#1E1E1E; border:1px solid #1E1E1E;
  padding:.85rem 1.2rem; border-radius:.25rem; font-weight:700; text-decoration:none;
}
.btn-outline:hover{ background:#1E1E1E; color:#fff; }

.contact-lines p{ margin:.35rem 0; color:#757575; display:flex; gap:.5rem; align-items:center; }
.contact-lines i{ color:#4169E1; }

/* Chips wiederverwenden */
.kpi-chips{ list-style:none; margin:.1rem 0 .6rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.kpi-chips li{
  background:#F2F5FF; border:1px solid #e6ecff; color:#1E1E1E; font-weight:700; font-size:.9rem;
  border-radius:999px; padding:.3rem .6rem;
}

/* Ansprechpartner */
.contact-person{ display:flex; gap:.6rem; align-items:center; margin:.6rem 0 0; }
.contact-person img{
  width:48px; height:48px; border-radius:50%; object-fit:cover; box-shadow:0 3px 10px rgba(0,0,0,.08);
}
.contact-person small{ display:block; color:#757575; }

/* Karte in Card */
.map-card .map-title{ margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* Kontakt: zwei Spalten hübsch nebeneinander, Map optisch wie hoch wie das Formular */
.contact-card { height: 100%; }

/* Kartenhöhe auf Desktop großzügig, mobil kompakter */
.contact-map { height: 560px; }            /* Desktop-Zielhöhe */
.contact-map iframe,
.contact-map .map-preview { height: 100%; }

@media (max-width: 1024px){
  .contact-map { height: 480px; }
}
@media (max-width: 768px){
  .contact-map { height: 320px; }          /* unter dem Formular */
}

/* Optional: kleinere Überschrift innerhalb der Map-Card */
.map-card .map-title { margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* Kontakt-Row: Auf Desktop sicher zweispaltig nebeneinander */
@media (min-width: 769px){
  .row-contact{
    display: flex;
    gap: 1rem;               /* optischer Abstand zwischen Spalten */
  }
  .row-contact > .col-3{
    float: none;             /* Floats deaktivieren zugunsten von Flex */
    width: 50%;              /* exakt halbe Breite */
  }
  .contact-card{ height: 100%; display: flex; flex-direction: column; }
  .contact-map{ flex: 1; min-height: 560px; }  /* passt sich an, aber mit Mindesthöhe */
  .contact-map iframe,
  .contact-map .map-preview{ height: 100%; }
}

/* Tablet & Mobile: Standard-Stack beibehalten */
@media (max-width: 768px){
  .contact-map{ height: 320px; }
}

/* Headline in der Map-Card etwas kompakter */
.map-card .map-title{ margin:.1rem 0 .5rem; font-size:1.05rem; color:#1E1E1E; }

/* --- Kontakt: hübsche Checkbox --- */
.kontakt-form .checkbox input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: .2rem 0 0;
  border: 2px solid #1E1E1E;
  border-radius: 4px;
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex: 0 0 20px;
  transition: box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.kontakt-form .checkbox input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(65,105,225,.25);
  border-color: #4169E1;
}

/* Häkchen */
.kontakt-form .checkbox input[type="checkbox"]::after{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;
  clip-path: polygon(14% 52%, 0 66%, 42% 100%, 100% 24%, 84% 10%, 40% 70%);
  background: #1E1E1E;
}
.kontakt-form .checkbox input[type="checkbox"]:checked{
  background: #FAFAFA;
  border-color: #1E1E1E;
}
.kontakt-form .checkbox input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* Text neben der Checkbox */
.kontakt-form .checkbox.agree{
  align-items: flex-start;
  line-height: 1.5;
  color: #4A4A4A;
}

/* Keine hässlichen Wortbrüche im Einwilligungstext/Link */
.kontakt-form .checkbox.agree{
  overflow-wrap: normal;
  word-break: normal;
}
.kontakt-form .checkbox.agree a{
  white-space: nowrap;          /* „Datenschutzerklärung“ bleibt zusammen */
  color: #4169E1;
  text-decoration: underline;
}
.kontakt-form .checkbox.agree a:hover{ color: #3458cf; }

/* --- Dark-Button wie auf anderen Seiten --- */
.btn-dark{
  background: #1E1E1E !important;
  color: #fff !important;
  border: 2px solid #1E1E1E;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.btn-dark:hover{
  background: #3458cf !important;     /* dein bewährter Hover */
  border-color: #3458cf;
}
.btn-dark:focus-visible{
  outline: 3px solid rgba(65,105,225,.35);
  outline-offset: 2px;
}

/* Abstand oberhalb des Button-Bereichs etwas erhöhen */
.kontakt-form .inline-actions{ margin-top: .3rem; }

.contact-cta-button:disabled {
  opacity: .6;
  cursor: not-allowed;
  filter: grayscale(15%);
}

/* Hinweis/Alert – abgestimmt auf Cards/Buttons */
.alert{
  display:flex; align-items:flex-start; gap:.6rem;
  background:#1E1E1E; color:#fff;
  border-radius:8px; padding:.85rem 1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  border:1px solid rgba(255,255,255,.06);
}
.alert__icon{
  font-size:1.15rem; line-height:1; color:#4169E1; /* Markenblau */
  margin-top:.15rem; flex:0 0 auto;
}
.alert__body{ line-height:1.5; }
.alert__body strong{ font-weight:800; margin-right:.25rem; color:#fff; }
.alert__close{
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  font-size:1.25rem; line-height:1; color:#BDBDBD; padding:.1rem .25rem; border-radius:6px;
}
.alert__close:hover{ color:#fff; background:rgba(255,255,255,.06); }
.alert__close:focus-visible{
  outline:2px solid #3458cf; outline-offset:2px;
}

/* sanftes Einblenden */
@keyframes alertFadeIn{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
.alert{ animation: alertFadeIn .18s ease-out; }

/* Erfolgs-Alert */
.alert-success {
  display: flex;
  align-items: center;
  gap: 0.6rem;

  margin: 1rem 0;
  padding: 0.85rem 1rem;

  background: #f0f8f5;               /* sanftes Grün */
  border: 1px solid #c6ebd6;
  color: #215732;                    /* dunkler Grünton */

  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.05);

  font-size: 0.95rem;
  line-height: 1.5;
}

.alert-success i {
  color: #2e7d32;                    /* grünes Check-Icon */
  font-size: 1.2rem;
  flex-shrink: 0;
}

.alert-success strong {
  font-weight: 700;
  margin-right: 0.25rem;
  color: #215732;
}

/* sanftes Einblenden */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert-success {
  animation: fadeSlideIn .25s ease-out;
}

/* Karte: bessere Lesbarkeit im Overlay */
.map-consent .map-overlay{
  /* dunkler & ruhiger, optional leichter Blur für mehr Kontrast */
  background: rgba(20,20,20,.72);
  backdrop-filter: blur(1.5px);
  color: #fff;
}

/* Hinweistext im Overlay */
.map-consent .map-hint{
  color:#fff;
  font-weight:600;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Links im Overlay (weiß + klar unterstrichen) */
.map-consent .map-hint a,
.map-consent .map-open-extern a{
  color:#fff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight:700;
}
.map-consent .map-hint a:hover,
.map-consent .map-open-extern a:hover{
  opacity:.9;
}

/* Extern öffnen-Zeile ebenfalls gut lesbar */
.map-consent .map-open-extern{
  color:#fff;
  opacity:.95;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Button auf dem Overlay: mehr Kontrast/Fokus */
.map-consent .map-btn{
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.map-consent .map-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* Vorschau etwas abdunkeln, damit Text besser wirkt */
.map-consent .map-preview{
  filter: brightness(.6) contrast(.98) saturate(.95);
}

/* ab sehr kleinen Viewports: Text leicht größer */
@media (max-width: 420px){
  .map-consent .map-hint{ font-size: .98rem; }
}

/* Dropzone */
.file-drop{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem; min-height:140px; padding:1rem 1.25rem;
  border:2px dashed #d5d9e4; border-radius:16px;
  background:#f8fafc; cursor:pointer; text-align:center;
  transition:.2s ease;
}
.file-drop i{ font-size:1.1rem; opacity:.85; }
.file-drop.is-dragover{ background:#eef2ff; border-color:#3b82f6; }

.file-list{ margin:.5rem 0 0; padding:0; list-style:none; }
.file-list li{
  display:flex; align-items:center; gap:.5rem;
  margin-top:.5rem; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:.45rem .6rem;
}
.file-list li .size{ margin-left:auto; opacity:.7; font-variant-numeric: tabular-nums; }
.file-list li.invalid{ border-color:#ef4444; background:#fff7f7; }

.form-hint{ font-size:.92rem; color:#6b7280; }

/* Optional: Error-Alert analog zu success */
.alert-error{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.9rem 1rem; margin:1rem 0; border-radius:12px;
  background:#fef2f2; color:#991b1b; border:1px solid #fecaca;
  box-shadow:0 6px 18px rgba(148,27,27,.06);
}
.alert-error i{ margin-top:.1rem; }

html, body {
  overflow-x: hidden;
  overflow-y: auto;
}







/* Ansprechpartner – Bild deutlich kleiner auf Desktop */
.ansprechpartner-row{
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Floats aus, damit Flex greifen kann */
.ansprechpartner-row > .col-3{
  float: none;
  width: auto;
}

/* Textseite wächst, Bildseite bleibt schlank */
.ansprechpartner-row .col-3:first-child{ 
  flex: 1 1 560px;              /* links: flexibel/breit */
}
.ansprechpartner-row .col-3:last-child{ 
  flex: 0 0 clamp(240px, 28vw, 380px); /* rechts: 240–380px, abhängig von Viewport */
}

/* Bildkarte füllt nur ihre (schmale) Spalte */
.person-card{
  width: 100%;
}

/* Bild sauber skalieren; optional mit Zuschnitt auf 3:4 */
.person-card img{
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eee;
  /* Zuschnitt für einheitliche Höhe: */
}
@supports (aspect-ratio: 3/4){
  .person-card img{
    aspect-ratio: 3 / 4;   /* einheitliches Hochformat */
    object-fit: cover;     /* schneidet überstehende Ränder sauber */
  }
}

/* Mobil bleibt es untereinander und 100% breit */
@media (max-width: 768px){
  .ansprechpartner-row{ display: block; }
  .ansprechpartner-row .col-3{ width: 100%; }
  .ansprechpartner-row .col-3:last-child{ flex: none; }
}


/* === Ansprechpartner: gleiche Höhe für Text & Bild === */
.ansprechpartner-row{
  display: flex;
  gap: 1.25rem;
  align-items: stretch;                /* beide Spalten gleich hoch */
}

/* Floats raus, Flex rein */
.ansprechpartner-row > .col-3{
  float: none;
  width: auto;
}

/* Text links flexibel, Bildspalte schlank */
.ansprechpartner-row .col-3:first-child{
  flex: 1 1 560px;
}
.ansprechpartner-row .col-3:last-child{
  flex: 0 0 clamp(260px, 28vw, 380px);
  display: flex;                       /* damit die Card volle Höhe bekommt */
}

/* Card füllt die Spaltenhöhe; Bild füllt die Card-Höhe */
.person-card{
  display: grid;
  grid-template-rows: 1fr auto;        /* Bild oben dehnt sich, Info unten */
  width: 100%;
  height: 100%;
}
.person-card img{
  width: 100%;
  height: 100%;                        /* passt sich der Texthöhe an */
  object-fit: cover;                   /* sauberer Zuschnitt */
  object-position: center;             /* Fokus mittig */
  display: block;
  aspect-ratio: auto !important;       /* frühere Aspect-Ratio-Regel neutralisieren */
}

/* Mobile: untereinander, Bild wieder natürlich groß */
@media (max-width: 768px){
  .ansprechpartner-row{ display: block; }
  .ansprechpartner-row .col-3{ width: 100%; }
  .person-card{ display: block; height: auto; }
  .person-card img{ height: auto; object-fit: contain; }
}

/* Ansprechpartner – Bild scharf & nicht abgeschnitten */
.ansprechpartner-row{
  display: flex;
  gap: 1.25rem;
  align-items: center;                 /* nur mittig ausrichten, keine Zwangshöhen */
}

/* Floats aus, Breiten wie gehabt */
.ansprechpartner-row > .col-3{ float: none; width: auto; }
.ansprechpartner-row .col-3:first-child{ flex: 1 1 560px; }
.ansprechpartner-row .col-3:last-child{  flex: 0 0 clamp(260px,28vw,380px); }

/* Bild NICHT strecken */
.person-card{ display: block !important; height: auto !important; }
.person-card img{
  display: block;
  width: 100%;
  height: auto !important;            /* <-- nimmt die Skalierung zurück */
  aspect-ratio: auto !important;      /* evtl. gesetztes 3/4 neutralisieren */
  object-fit: contain !important;     /* kein Cropping mehr */
  object-position: center;
  background: none !important;        /* falls irgendwo noch ein background draufliegt */
}

/* Mobil: untereinander */
@media (max-width: 768px){
  .ansprechpartner-row{ display: block; }
  .ansprechpartner-row .col-3{ width: 100%; }
}

/* === Service-Details (unter den Karten) === */
.service-detail{
  padding: 3rem 0;
  background: #fff;
  border-top: 1px solid #eee;
}
.service-detail.service-gray{ background: #FAFAFA; }
.service-detail__header{ margin-bottom: .75rem; }
.service-detail__intro{ color:#757575; line-height:1.6; }

/* Anker-Offset: Sprungziele nicht unter dem fixen Header verstecken */
.service-detail[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* Unter-Leistungen als kleine Karten */
.subcard{
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border: 1px solid #eee;
  padding: 1.1rem 1.2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.subcard h3{
  margin: .5rem 0 .35rem;
  font-size: 1.2rem;
  color:#1E1E1E;
}
.subcard p{ margin: 0 0 .6rem; color:#616161; }

/* kompakte Feature-Liste */
.subcard-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
  color: #757575;
}
.subcard-list li{
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.5;
}
.subcard-list li::before{
  content: "✓";
  position: absolute;
  left: 0; top: .15rem;
  width: .9rem; height: .9rem; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .6rem; font-weight: 800; color: #fff;
  background: #4169E1;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* mobile: 1 Spalte, ausreichend Luft */
@media (max-width: 768px){
  .service-detail{ padding: 2rem 0; }
  /* dein Grid setzt col-3 ohnehin auf 100% – hier nur Abstand zwischen den Subcards */
  .service-detail .row > .col-3 + .col-3{ margin-top: 1rem; }
}

/* === BIM-Management – Feinschliff ======================================= */
#bim-management{
  background: linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);
  border-top: 1px solid #eee;
}
#bim-management .service-detail__header{
  max-width: 940px;
  margin-bottom: .75rem;
}
#bim-management .service-detail__intro{ color:#616161; }

/* Spalten so aufspannen, dass die Card die ganze Höhe füllt */
#bim-management .row + .row > .col-3{ display:flex; }
#bim-management .row + .row > .col-3 > .subcard{ width:100%; }

/* Card-Look */
#bim-management .subcard{
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  padding:1.15rem 1.2rem 1rem;
}
#bim-management .subcard h3{
  margin:.5rem 0 .35rem;
  font-size:1.22rem;
  line-height:1.3;
  color:#1E1E1E;
}
#bim-management .subcard > p{
  margin:0 0 .6rem;
  color:#616161;
}

/* Icon-Badge oben */
#bim-management .subcard .feature-icon{
  width:64px; height:64px;
  background:#F2F5FF;               /* leichtes Blau statt Grau */
  box-shadow:0 4px 14px rgba(65,105,225,.15);
  margin: .1rem 0 .25rem;            /* zentriert per default (margin:auto) */
}
#bim-management .subcard .feature-icon i{
  font-size:1.9rem;
  color:#4169E1;
}

/* Liste: kompakter + saubere Check-Badges */
#bim-management .subcard-list{
  list-style:none; margin:.1rem 0 0; padding:0;
  display:grid; gap:.42rem;
  color:#757575;
}
#bim-management .subcard-list li{
  position:relative;
  padding-left:1.3rem;
  line-height:1.55;
}
#bim-management .subcard-list li::before{
  content:"✓";
  position:absolute; left:0; top:.2rem;
  width:.9rem; height:.9rem; border-radius:50%;
  display:grid; place-items:center;
  font-size:.6rem; font-weight:800;
  color:#fff; background:#4169E1;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}

/* Abstand zwischen den beiden Karten auf Mobil */
@media (max-width:768px){
  #bim-management .row + .row > .col-3 + .col-3{ margin-top:1rem; }
}

/* 'Unsere Mehrwerte' – Text in Grau */
.service-hero .service-box p {
  color: #757575;
}

/* Optional: auch die H3-Überschriften etwas softer machen */
.service-hero .service-box h3 {
  color: #4A4A4A; /* weglassen, wenn Überschriften dunkel bleiben sollen */
}

/* in css/style.css */
input.hp {
  position: absolute !important;
  left: -100vw;      /* weit außerhalb des Viewports */
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;        /* unsichtbar */
  pointer-events: none;
}

.file-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.file-list li {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .6rem; margin-bottom: .35rem;
  border: 1px solid #e5e7eb; border-radius: 8px;
}
.file-list li.invalid {
  background: #fde7e7; border-color: #f5b5b5; color: #842029;
}
.file-remove {
  margin-left: auto; border: 0; background: transparent;
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.file-drop.has-error { outline: 2px dashed #f43f5e; }
.service-button:disabled { opacity: .6; pointer-events: none; }

.cta-start-button {
  display: inline-flex;      /* statt inline-block */
  align-items: center;
  justify-content: center;
  gap: .35rem;               /* optional, falls später Icons dazukommen */
  background: #1E1E1E;
  color: #fff;
  font-weight: 700;
  padding: .85rem 1.2rem;
  border-radius: .25rem;
  line-height: 1;            /* gleiche Höhe */
  cursor: pointer;
  text-decoration: none !important;
  background-color: #4169E1;
}

.cta-start-button:hover { background: #fff; color: #4169E1; }