/* =========================================================================
   VENTIS Solutions GmbH – Content-Theming
   Ergaenzt styles.min.css (Original-CI der VENTIS-Gruppe) – veraendert das
   Basis-CI NICHT. Enthaelt nur Anpassungen fuer das Beratungs-/Interim-Geschaeft
   (Service-Kacheln als Teal-Gradient-Tiles statt Philatelie-Fotos).
   ========================================================================= */

/* Service-Kacheln zentriert umbrechen (2. Reihe wird zentriert, z.B. 3+2) */
.cs-services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.cs-services .card-service {
  flex: 0 1 calc((100% - 3rem) / 3);
  min-width: 280px;
}
@media (max-width: 64em) {
  .cs-services .card-service { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 40em) {
  .cs-services .card-service { flex-basis: 100%; }
}

/* Service-Kacheln (Startseite) – Gradient-Tile mit zentriertem Icon */
.card-service-image.cs-tile {
  background: linear-gradient(135deg, #0a3740 0, var(--clr-primary-400) 50%, #1a6875 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-service-image.cs-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, hsla(0, 0%, 100%, .03) 1px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, .03) 1px, transparent 0);
  background-size: 32px 32px;
  z-index: 0;
}
.card-service-image.cs-tile { position: relative; overflow: hidden; }
/* Radialer Lichtschein fuer Tiefe */
.card-service-image.cs-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(120% 90% at 70% 15%, rgba(127, 224, 208, .18), transparent 60%);
}
/* Owned SVG-Motiv (Orbit/Trajektorie/Netzwerk) im Hintergrund */
.card-service-image.cs-tile .cs-motif {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: #7fe0d0;
  opacity: .5;
}
/* Zentrales Icon ueber Motiv oder Foto */
.card-service-image svg.cs-ic {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  color: #fff;
  opacity: .98;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .35));
}

/* ---- Route 2 Vorbereitung: Foto-Slot mit Teal-Duotone ---- */
/* Bild in .card-service-image.has-photo><img> legen -> automatisch getont */
.card-service-image.has-photo { background: #0a1f2e; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.card-service-image.has-photo img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Teal-Duotone via Filter (zuverlaessig, unabhaengig vom Motiv) */
  filter: grayscale(1) sepia(1) hue-rotate(158deg) saturate(0.70) brightness(0.82) contrast(1.04);
}
.card-service-image.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* dezente Tiefe unten */
  background: linear-gradient(180deg, transparent 55%, rgba(4, 22, 28, .3));
}
/* Full-Bleed Bild-Band mit Text darueber (Teal-Duotone) */
.media-band {
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: center;
}
.media-band > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* heller, damit das Triebwerk klar erkennbar bleibt */
  filter: grayscale(1) sepia(1) hue-rotate(158deg) saturate(0.70) brightness(0.82) contrast(1.04);
  z-index: 0;
}
/* Scrim links -> Text lesbar, Motiv rechts sichtbar */
.media-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(4, 22, 28, .92) 0%, rgba(4, 22, 28, .62) 38%, rgba(4, 22, 28, .15) 68%, transparent 100%);
}
/* Feines AI-/Netzwerk-Overlay (Aerospace + AI) */
.media-band .band-motif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  color: #8fe9d8;
  opacity: .22;
  pointer-events: none;
}
.media-band .wrapper { position: relative; z-index: 3; text-align: left; }
.media-band h2 { color: #fff; }
.media-band p { color: hsla(0, 0%, 100%, .85); }

/* Wiederverwendbarer Duotone-Wrapper (Hero-/Section-Bilder) */
.media-duotone { position: relative; overflow: hidden; }
.media-duotone > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}
.media-duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(155deg, rgba(10, 55, 64, .82), rgba(16, 80, 91, .5) 55%, rgba(26, 104, 117, .45));
  mix-blend-mode: multiply;
}

/* Logo: sauber auf 50px Hoehe, ohne Verzerrung */
.site-header .logo img {
  height: 50px;
  width: auto;
}

/* Kennzahlen-Reihe (Startseite) */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l);
  text-align: center;
}
.stat-row .stat-value {
  font-size: var(--fs-xxl);
  font-weight: 700;
  color: var(--clr-primary-400);
  line-height: 1.1;
}
.stat-row .stat-label {
  font-size: var(--fs-s);
  color: var(--element-2);
}
@media (max-width: 46.875em) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

/* Team-Kacheln (Über uns) */
.team-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.team-card {
  background: #fff;
  border: 1px solid var(--border-clr);
  border-radius: var(--br-s, 12px);
  overflow: hidden;
  display: grid;
  grid-template-columns: 230px 1fr;
}
.team-card .tc-photo {
  width: 100%;
  height: 100%;
  min-height: 230px;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.team-card .tc-avatar {
  width: 100%;
  height: 100%;
  min-height: 230px;
  background: linear-gradient(135deg, #0a3740, #10505b 60%, #1a6875);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.team-card .tc-body { padding: 1.75rem 1.9rem; align-self: center; }
@media (max-width: 52em) {
  .team-card { grid-template-columns: 1fr; }
  .team-card .tc-photo,
  .team-card .tc-avatar { height: 260px; min-height: 0; }
}
.team-card .btn { margin-top: .25rem; }
/* Stretched-Link-Overlay in Team-Karten deaktivieren: sonst macht Angelikas
   "Zum Coaching-Angebot"-Link (.card-service-link) mangels positioniertem
   Eltern-Container die ganze Karte / den ganzen Textbereich klickbar. */
.team-card .card-service-link { position: relative; }
.team-card .card-service-link::before { content: none; }
.tc-stats {
  display: flex;
  gap: .5rem;
}
.tc-stats .s {
  flex: 1;
  background: #e6f3f5;
  border-radius: 6px;
  padding: .5rem .35rem;
  text-align: center;
}
.tc-stats .s b {
  display: block;
  color: var(--clr-primary-400);
  font-weight: 700;
  font-size: var(--fs-m);
  line-height: 1.1;
}
.tc-stats .s span {
  font-size: var(--fs-xs);
  color: var(--element-2);
}

/* Initialen-Avatar (falls kein Foto vorhanden, z.B. Angelika) */
.avatar-initials {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--br-s, 12px);
  background: linear-gradient(135deg, #0a3740, #10505b 60%, #1a6875);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: .06em;
}

/* Rechtslinks in der Footer-Copyright-Zeile */
.footer-copyright a { color: inherit; text-decoration: underline; }
.footer-copyright a:hover { opacity: 1; }

/* Zusammenarbeitsformen 4-spaltig (zentriert umbrechend) */
.cs-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.cs-modes .card-info {
  flex: 0 1 calc((100% - 4.5rem) / 4);
  min-width: 230px;
}
@media (max-width: 64em) {
  .cs-modes .card-info { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 40em) {
  .cs-modes .card-info { flex-basis: 100%; }
}

/* Einsatzformen-Karten (Startseite) */
.mode-ic {
  width: 34px;
  height: 34px;
  color: var(--clr-primary-400);
}
.card-mode { text-align: left; }

/* Willkommen-/Intro-Signatur */
.intro-sign {
  font-weight: 600;
  color: var(--clr-primary-400);
}

/* Hero mit rotierendem Duotone-Bild (Sub-Pages) */
.hero.has-bg { overflow: hidden; }
.hero.has-bg .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* gleiche Teal-Duotone wie das Branchen-Band */
  filter: grayscale(1) sepia(1) hue-rotate(158deg) saturate(0.70) brightness(0.82) contrast(1.04);
  z-index: 0;
}
/* Scrim (Text links lesbar, Bild rechts sichtbar) – ueberschreibt nur das Base-Gradient */
.hero.has-bg::after {
  background: linear-gradient(90deg, rgba(4, 22, 28, .92) 0%, rgba(10, 55, 64, .72) 38%, rgba(16, 80, 91, .42) 68%, rgba(16, 80, 91, .3) 100%);
}

/* Verfuegbarkeits-Zeile (Hero / Profil) */
.availability {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-s);
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  padding: .35rem .9rem;
}
.availability::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: #56d364;
  box-shadow: 0 0 0 3px rgba(86, 211, 100, .25);
}

/* Kompetenzfeld-Karte mit Success-Story (Profil) */
.cs-field .cs-metric {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem 0;
  border-top: 1px solid var(--border-clr);
  border-bottom: 1px solid var(--border-clr);
  margin: .25rem 0;
}
.cs-field .cs-metric b {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--clr-primary-400);
  line-height: 1;
}
.cs-field .cs-metric span {
  font-size: var(--fs-s);
  color: var(--element-2);
}
.cs-field .cs-story {
  font-size: var(--fs-s);
  color: var(--element-2);
}

/* Schlanke Sektor-Zeile (statt voller Sektion) */
.section.cs-strip { padding-top: 2.25rem; padding-bottom: 2.25rem; }

/* Sektor-Badges (helle Pills, auf weissem Grund) */
.sector-row {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}
.sector-row.is-center { justify-content: center; }
.pill-light {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-s);
  font-weight: 600;
  color: var(--clr-primary-400);
  background: #e9f3f4;
  border: 1px solid #cfe4e6;
  border-radius: 999px;
  padding: .4rem 1rem;
}
.pill-light svg { width: 15px; height: 15px; }

/* Kompetenz-Chip (Cred) – Kennzahl als Beweis-Chip */
.cred {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  border: 1px solid var(--border-clr);
  border-left: 3px solid var(--clr-primary-400);
  border-radius: 6px;
  padding: .55rem .9rem;
  background: #fff;
}
.cred b {
  font-size: var(--fs-l);
  font-weight: 700;
  color: var(--clr-primary-400);
  line-height: 1;
}
.cred span {
  font-size: var(--fs-xs);
  color: var(--element-2);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cred-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Persoenliche Note (Profil) */
.cs-personal {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-m) var(--space-xl);
}
.cs-personal .cs-personal-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.cs-personal .cs-personal-item svg {
  color: var(--clr-primary-400);
  flex: 0 0 auto;
  margin-top: .15rem;
}
@media (max-width: 46.875em) {
  .cs-personal { grid-template-columns: 1fr; }
}

/* ---- Kontaktformular: Rueckmeldungen (Erfolg / Fehler) ---- */
.form-message {
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
}
.form-message.is-success {
  background: #e6f6ef;
  color: #0f5132;
  border: 1px solid #a6d9c1;
  border-left: 3px solid #1a9c6b;
}
.form-message.is-error {
  background: #fdecec;
  color: #842029;
  border: 1px solid #f0b6b6;
  border-left: 3px solid #d9534f;
}

/* ---- FAQ-Akkordeon (Dienstleistungen) ---- */
.faq-list { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  background: #ffffff;
  border: 1px solid #dde3e5;
  border-left: 3px solid #10505b;
  border-radius: 12px;
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.25rem;
  font-weight: 600;
  color: #10505b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: #10505b;
  flex: 0 0 auto;
}
.faq-item[open] summary::after { content: "\2013"; }
.faq-item[open] summary { border-bottom: 1px solid #eef3f4; }
.faq-answer { padding: 1rem 1.25rem 1.15rem; }
.faq-answer p { margin: 0; }

/* ---- Sprachumschalter (DE/EN) in der Hauptnavigation ---- */
.nav-main-list .nav-lang { margin-left: 0.35rem; }
.nav-main-list .nav-lang a { font-weight: 700; letter-spacing: 0.03em; }

/* ---- Hero-Eyebrow (Slogan über dem Titel) ---- */
.hero-kicker {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #7fe0d0;
  margin: 0;
}

/* ---- Blockabstände straffer (waren 5.25rem oben+unten -> summierte sich zu viel) ---- */
.section,
.section-alt,
.section-alt-2 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
/* erster Block nach dem Hero: der Hero trennt schon optisch -> weniger Luft oben */
#content > .section:first-child {
  padding-top: 2rem;
}