/* ============================================================
   SCRAMBL – Design System v2 (Wireframe-getreu)
   ============================================================ */

:root {
  /* Türkis (Scrambl-Markenfarbe, aus Logo #6ED3CE) */
  --teal:        #6ED3CE;
  --teal-dark:   #3EA89E;
  --teal-light:  #E3F7F5;
  /* Grün (Scrambl-Markenfarbe) */
  --green:       #C5F464;
  --green-dark:  #8FBE2F;
  --green-light: #F3FBE3;
  --gradient-brand: linear-gradient(135deg, var(--teal) 0%, var(--green) 100%);
  /* Grau / Dunkelgrau (aus Logo #464E5B) */
  --dark:        #464E5B;
  --dark-mid:    #6B7280;
  --mid:         #7C8591;
  --light:       #F5F6F8;
  --white:       #FFFFFF;
  --border:      #E3E6EA;
  /* Formular-Feedback (Success/Error aus Scrambl-Farbpalette) */
  --success:     #0FA958;
  --error:       #E3184F;
  --font:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --radius:      10px;
  --radius-lg:   20px;
  --shadow:      0 1px 4px rgba(70,78,91,0.08);
  --shadow-md:   0 4px 20px rgba(70,78,91,0.10);
  --transition:  0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Grundschrift skaliert fliessend: 15px auf schmalen Handys bis 16px ab Tablet – alle rem-Groessen (Lauftext, Titel, Abstaende) skalieren mit */
html { scroll-behavior: smooth; font-size: clamp(15px, 14px + 0.25vw, 16px); }
html, body { overflow-x: hidden; max-width: 100%; }
/* Buttons und Formularfelder erben sonst nicht die Seitenschrift (Montserrat) */
button, input, select, textarea { font-family: inherit; }
body { font-family: var(--font); color: var(--dark); background: var(--teal); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; position: relative; }
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("images/para4.svg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
.footer, body > section, body > .hero-home, body > .hero-page {
  position: relative;
  z-index: 1;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* --- Typography --- */
h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; line-height: 1.2; }
h2 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 700; line-height: 1.42; padding-top: 5rem; padding-bottom: 0.75rem; }
/* Bild direkt vor dem Titel: kein grosser Titel-Abstand oben */
.img-before-title { display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.img-before-title + h2,
.section:nth-of-type(n) .img-before-title + h2,
.section-slim:nth-of-type(n) .img-before-title + h2 { padding-top: 2.5rem; }
.img-before-title--spaced { margin-top: 6.5rem; }
/* gleicher Abstand oben wie Abschnitt mit .section-balanced (Talentpool Management) */
.img-before-title--top { margin-top: 3.5rem; }
/* Laptop-Mockups vor Titeln: Desktop max. 450px, Handy kleiner */
.img-laptop { max-width: 450px; }
/* Abstand vor "Haeufige Fragen" ueberall gleich (ca. 150px Desktop) */
.section-faq h2,
.section:nth-of-type(n).section-faq h2 { padding-top: 3.5rem; }
/* gerade Abschnitte haben oben eine Welle (41px): Titel darunter mit gleicher Luft */
.section:nth-of-type(even).section-faq h2 { padding-top: calc(41px + 3.5rem); }
/* Abschnitt direkt vor den FAQ unten etwas knapper */
.section:has(+ .section-faq) { padding-bottom: 4rem; }
/* Abschnitt direkt vor den FAQ ohne Extra-Luft unten (Skill Intelligence) */
.section.section-tight-bottom,
.section:nth-of-type(n).section-tight-bottom { padding-bottom: 6rem; }
.section-tight-bottom .contact-form { margin-bottom: 0; }
/* Berufe-Grafik Skill Intelligence */
.si-berufe-img { display: block; width: 100%; max-width: 400px; height: auto; margin: 3rem auto 0; }
h3 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.4rem; }
p  { color: var(--dark-mid); line-height: 1.65; font-size: 0.95rem; }

/* --- Layout --- */
.container       { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.container-sm    { max-width: 846px;  margin: 0 auto; padding: 0 32px; }
.container-xs    { max-width: 560px;  margin: 0 auto; padding: 0 32px; }

/* ============================================================
   NAVIGATION – Weiß, wie im Wireframe
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--white);
  height: 64px;
}
.navbar-wave { position: absolute; top: calc(100% - 2px); left: 0; width: 100%; line-height: 0; pointer-events: none; }
.navbar-wave svg { width: 100%; height: 34px; display: block; }
@media (max-width: 680px) {
  .navbar-wave svg { height: 20px; }
}
.nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 32px 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0;
}
.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 0;
}
.nav-links li {
  display: flex;
  align-items: center;
}
.nav-links li + li:not(.lang-dropdown)::before {
  content: '|';
  color: var(--border);
  font-size: 0.9rem;
  padding: 0 2px;
}
.nav-links li a {
  display: block;
  padding: 4px 10px;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--dark-mid);
  transition: color 0.2s;
}
.nav-links li a:hover { color: var(--dark); }
.nav-links li a.active { font-weight: 700; color: var(--dark); }
.lang-dropdown { position: relative; margin-left: 8px; }
.lang-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
  cursor: pointer;
  transition: background var(--transition);
}
.lang-dropdown-toggle:hover { background: var(--teal-light); }
.lang-dropdown-arrow { width: 13px; height: 13px; transition: transform 0.2s ease; }
.lang-dropdown.open .lang-dropdown-arrow { transform: rotate(180deg); }
.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 84px;
  margin: 0;
  padding: 6px;
  z-index: 20;
}
.lang-dropdown.open .lang-dropdown-menu { display: block; }
.lang-dropdown-menu li a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark-mid);
  transition: background var(--transition), color var(--transition);
}
.lang-dropdown-menu li a:hover { background: var(--teal-light); color: var(--dark); }
.lang-dropdown-menu li a.active { font-weight: 700; color: var(--teal-dark); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  padding: 4px;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   SECTIONS
   ============================================================ */
/* Sektions-Hintergruende bewusst transparent: der Gradient liegt einmal auf
   body und zieht sich ueber die ganze Seite durch, keine farbigen Bloecke mehr. */
.section        { position: relative; padding-bottom: 6rem; }
/* oben und unten gleich viel Luft (z.B. Modul mit Bild ganz oben) */
.section-balanced { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.section-last   { padding-bottom: 6rem; }
.section-white,
.section-teal,
.section-light  { background: transparent; }
.section-slim   { position: relative; padding-bottom: 6rem; }
.section:nth-of-type(even),
.section-slim:nth-of-type(even) { background: #B7E9E7; }
.section:nth-of-type(even)::before,
.section:nth-of-type(even)::after,
.section-slim:nth-of-type(even)::before,
.section-slim:nth-of-type(even)::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 41px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2736 41' preserveAspectRatio='none'%3E%3Cpath d='M2737 41H0V22C0 22 154.5 34.5 435.5 34.5C716.5 34.5 1267.5 0 1823 0H2737V41Z' fill='%236ED3CE'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.section:nth-of-type(even)::before,
.section-slim:nth-of-type(even)::before { top: 0; transform: scaleY(-1) scaleX(-1); }
.section:nth-of-type(even)::after,
.section-slim:nth-of-type(even)::after { bottom: 0; }
.section-last::after { display: none; }

/* Schein: weicher Lichtfleck, der auf dem Gradient zwischen den Modulen liegt */
.schein { position: absolute; width: 1100px; max-width: 130vw; pointer-events: none; z-index: 0; }
.schein img { width: 100%; display: block; }
.schein-tl { top: -260px; left: -320px; }
.schein-tr { top: -260px; right: -320px; transform: scaleX(-1); }
.schein-bl { bottom: -260px; left: -320px; transform: scaleY(-1); }
.schein-br { bottom: -260px; right: -320px; transform: scale(-1, -1); }
.section > .container, .section > .container-sm { position: relative; z-index: 1; }

/* Wellenfoermiger Sektions-Uebergang. Die Welle sitzt am unteren Rand der
   VORANGEHENDEN Sektion und ist mit der Farbe der NAECHSTEN Sektion gefuellt.
   Glatte Kante liegt an der tatsaechlichen Farbgrenze (unten), der dezente
   Schwung zeigt nach oben in die vorangehende Sektion hinein. */
.wave-divider { position: absolute; bottom: -1px; left: 0; width: 100%; line-height: 0; z-index: 2; pointer-events: none; }
.wave-divider svg { width: 100%; height: 110px; display: block; }
.wave-divider.wave-flip { top: -1px; bottom: auto; transform: scaleY(-1); }
@media (max-width: 680px) {
  .wave-divider svg { height: 60px; }
  h2 { padding-top: 5rem; padding-bottom: 0.75rem; }
}

/* ============================================================
   HERO
   ============================================================ */
/* Home Hero – linksbündig, Bild rechts */
.hero-home {
  padding: 80px 0 6rem;
  margin-top: 64px;
  position: relative;
}
.hero-home .hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
}
.hero-home .hero-text { flex: 1; }
.hero-home .hero-text h1 { color: var(--dark); margin-top: 2rem; margin-bottom: 1rem; }
.hero-home .hero-text p  { color: var(--dark); font-size: 1rem; margin-bottom: 1.5rem; max-width: 560px; }
.hero-home .hero-img {
  flex: 0 0 400px;
  aspect-ratio: 4/3;
  background: rgba(255,255,255,0.16);
  border-radius: var(--radius-lg);
  border: 1.5px dashed rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  font-weight: 500;
}
.hero-home .hero-img svg { opacity: 0.85; }
.hero-home .hero-img-photo {
  background: none;
  border: none;
  aspect-ratio: auto;
  padding: 0;
}
.hero-home .hero-img-photo img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 12px 28px rgba(70,78,91,0.18));
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Team (Ueber uns) */
.team-group { margin-top: 2.5rem; text-align: center; }
.team-group:first-of-type { margin-top: 2rem; }
.team-group-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 1rem; }
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.team-card { width: 200px; text-align: center; }
.team-role { white-space: nowrap; }
/* auf breiten Bildschirmen 5 Personen pro Reihe */
@media (min-width: 1200px) { .team-grid { margin-left: -50px; margin-right: -50px; } }
.team-photo { aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto 10px; max-width: 120px; overflow: hidden; }
.team-photo span { font-size: 0.65rem; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.team-name { font-weight: 700; font-size: 0.9rem; color: var(--dark); }
.team-role { font-size: 0.75rem; color: var(--dark-mid); margin-top: 2px; }

/* Legal pages (Impressum, AGB) */
.legal-content { margin-top: 2rem; }
/* Inhaltsuebersicht (Datenschutz): schlicht, einspaltig, klein, ohne Hintergrund und Aufzaehlungszeichen */
.legal-toc {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.legal-content .legal-toc h3 { margin-top: 0; margin-bottom: 0.6rem; font-size: 0.95rem; }
.legal-content .legal-toc ul { display: block; margin: 0; padding: 0; }
.legal-content .legal-toc li { list-style: none; font-size: 0.8rem; line-height: 1.5; margin: 0 0 2px; color: var(--dark-mid); }
.legal-content .legal-toc a { color: var(--dark); text-decoration: none; }
.legal-content .legal-toc a:hover { text-decoration: underline; }
.contact-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) {
  .contact-info-grid { grid-template-columns: 1fr; }
}
.legal-content h3 { font-size: 1.05rem; margin-top: 2rem; margin-bottom: 0.5rem; color: var(--dark); }
.legal-content h4 { font-size: 0.92rem; margin-top: 1.25rem; margin-bottom: 0.4rem; color: var(--dark); }
.legal-content p { margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--dark); }
.legal-content strong { color: var(--dark); }
.legal-content ul { margin: 0 0 0.75rem 1.4em; }
.legal-content li { font-size: 0.9rem; color: var(--dark-mid); margin-bottom: 0.3rem; list-style: disc; }
.legal-content a { color: var(--teal-dark); text-decoration: underline; }

/* Generic image placeholder */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--light);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  color: var(--mid);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  padding: 16px;
}
.img-placeholder svg { opacity: 0.55; }

/* Inner pages Hero – zentriert */
.hero-page {
  padding: 90px 0 6rem;
  margin-top: 64px;
  text-align: center;
  position: relative;
}
.hero-page h1  { color: var(--dark); margin-top: 2.5rem; margin-bottom: 0.75rem; }
.hero-page p   { color: var(--dark); font-size: 1rem; max-width: 820px; margin: 0 auto 1.5rem; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
  border: 1.5px solid transparent;
  font-family: var(--font);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn-dark {
  background: #464E5B;
  color: var(--white);
  border-color: #464E5B;
}
.btn-dark:hover { background: #363C47; }

.btn-outline {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn-outline:hover { background: var(--dark); color: var(--white); }

.btn-full { width: 100%; text-align: center; display: block; }
.btn-lg { padding: 15px 34px; font-size: 1rem; border-radius: 8px; box-shadow: var(--shadow-md); }
.btn-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   SECTION TITLES – linksbündig wie im Wireframe
   ============================================================ */
.section-title-left  { margin-bottom: 0.5rem; }
.section-title-center { text-align: center; margin-bottom: 0.5rem; }
.section-sub { font-size: 0.95rem; color: var(--dark); margin-bottom: 2rem; }
.section-sub-white { font-size: 0.95rem; color: var(--dark); margin-bottom: 2rem; }

/* ============================================================
   PROBLEM CARDS (4 Spalten)
   ============================================================ */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}
.cards-3.cards-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: var(--shadow);
}
.card-num {
  width: 28px; height: 28px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
  margin-bottom: 10px;
}

/* Zweispaltiges Kachelraster mit Nummern-Badge (optisch abgesetzt von .cards-4) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}
.tile-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tile-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
}
.tile-num svg { width: 16px; height: 16px; }
.tile-card h3 { margin-bottom: 4px; }
.tile-card p { font-size: 0.9rem; color: var(--dark); margin: 0; }
@media (max-width: 680px) {
  .tile-grid { grid-template-columns: 1fr; }
}
.card-icon {
  width: 34px;
  height: 34px;
  color: var(--teal);
  margin-bottom: 12px;
}
.card-icon svg { width: 100%; height: 100%; }
.card h3 { font-size: 0.9rem; margin-bottom: 6px; }
.card p  { font-size: 0.85rem; }

/* ============================================================
   ENTRY CARDS (Einstieg-Section Home)
   ============================================================ */
.card-entry {
  background: var(--white);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card-entry:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--teal-dark);
  text-transform: uppercase;
  background: var(--teal-light);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.card-entry h3 { font-size: 1rem; }
.card-entry p  { font-size: 0.85rem; flex: 1; }
.card-bullets  { padding-left: 0; margin: 4px 0; }
.card-bullets li {
  font-size: 0.82rem;
  color: var(--dark);
  padding: 2px 0;
  position: relative;
}
.card-bullets li::before { content: none; }
.solution-block .card-bullets li { padding: 2px 0 2px 22px; }
.solution-block .card-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 0.85rem;
}
.link-arrow {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
  margin-top: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding-bottom: 1px;
}
.link-arrow:hover { border-color: var(--white); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-slider { max-width: 900px; margin: 0 auto; position: relative; overflow: hidden; }
.testimonial-card {
  padding: 12px 8px;
  text-align: center;
  position: absolute;
  top: 0; left: 0; right: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.testimonial-card.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.testimonial-card.prev { transform: translateX(-40px); }
.testimonial-quote { font-size: 1rem; font-style: italic; line-height: 1.7; color: var(--dark); margin-bottom: 18px; }
.testimonial-author { font-weight: 700; color: var(--dark); }
.testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.testimonial-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background var(--transition); }
.testimonial-dot.active { background: var(--dark); }
.testimonial-role { font-size: 0.85rem; color: var(--mid); margin-top: 2px; }

.testimonials-box {
  background: var(--light);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 48px 24px;
  text-align: center;
  color: var(--mid);
  font-size: 0.9rem;
  margin-top: 1.5rem;
  max-width: 520px;
}

/* ============================================================
   BENEFIT ROWS (Home Section 5)
   ============================================================ */
.benefit-rows { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 10px; }
.benefit-row {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow);
}
.benefit-check {
  width: 26px; height: 26px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.benefit-row strong { display: block; font-size: 0.92rem; color: var(--dark); margin-bottom: 2px; }
.benefit-row p { font-size: 0.83rem; margin: 0; }

/* ============================================================
   STATS (Daten-Section)
   ============================================================ */
.stats-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 1.5rem;
}
.stat-item {
  text-align: left;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
}
.stat-num  {
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  display: inline-block;
}
.stat-lbl  { font-size: 0.85rem; color: var(--dark-mid); margin-top: 8px; }

/* Stat boxes (Talent Attraction) */
.stat-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 1.5rem;
}
.stat-box {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-box .stat-big { font-size: 1.8rem; font-weight: 800; color: var(--teal); }
.stat-box .stat-desc { font-size: 0.8rem; color: var(--mid); margin-bottom: 4px; }

.section-stats-graphic { overflow: hidden; }
.section-stats-graphic::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("images/grafik.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}

/* ============================================================
   ACCORDION (Talent Attraction – Lösung)
   ============================================================ */
.accordion { margin-top: 1.5rem; border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:last-child { border-bottom: none; }
.acc-header {
  width: 100%;
  background: var(--white);
  border: none;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 0.2s;
}
.acc-header:hover { background: var(--teal-light); }
.acc-title { font-size: 0.95rem; font-weight: 600; color: var(--dark); }
.acc-sub   { font-size: 0.8rem; color: var(--mid); margin-top: 2px; }
.acc-icon  {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.25s;
}
.acc-item.open .acc-icon { transform: rotate(45deg); }
.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.acc-item.open .acc-body { max-height: 300px; }
.acc-body-inner { padding: 4px 20px 20px; }
.acc-body-inner p { font-size: 0.88rem; }
.acc-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal-dark);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 8px;
}

/* ============================================================
   PROCESS STEPS (Talent Attraction – Prozess)
   ============================================================ */
.process-steps { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 12px; max-width: 940px; margin-left: auto; margin-right: auto; }
.process-step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  gap: 18px;
  box-shadow: var(--shadow);
}
.step-num {
  width: 36px; height: 36px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  flex-shrink: 0;
}
.step-content h3 { font-size: 0.92rem; color: var(--dark); margin-bottom: 4px; }
.step-content p  { font-size: 0.85rem; }
/* feine Linie zwischen Text und Aufzaehlung (Prozess-Schritte) */
.step-content ul { margin-top: 12px; padding-top: 12px; padding-left: 0; border-top: 1px solid var(--border); }
.step-content ul li {
  font-size: 0.83rem;
  color: var(--dark-mid);
  padding: 2px 0 2px 14px;
  position: relative;
}
.step-content ul li::before { content: ''; position: absolute; left: 2px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.step-content { flex: 1; min-width: 0; max-width: 640px; }
/* Bild ganz rechts; feste Box + contain, damit hohe (Handy) und breite Bilder gleich gross wirken */
.step-img {
  flex: 0 0 160px;
  height: 160px;
  margin-left: auto;
  padding-left: 40px; box-sizing: content-box;
  display: flex; align-items: center; justify-content: center;
}
.step-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* ============================================================
   CHECKLIST (Talent Activation)
   ============================================================ */
.checklist { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 8px; }
.check-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.check-row:hover { border-color: var(--teal); }
.check-circle {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.check-row input[type="checkbox"] { display: none; }
.check-row input:checked + .check-circle {
  background: var(--teal);
  border-color: var(--teal);
}
.check-row input:checked + .check-circle::after {
  content: '✓';
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
}
.check-label { font-size: 0.9rem; color: var(--dark); }
.check-hint {
  background: var(--teal-light);
  border-left: 3px solid var(--teal);
  padding: 12px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.88rem;
  color: var(--dark-mid);
  margin-top: 12px;
}

/* ============================================================
   FAQ (Talent Activation & Skill Intelligence)
   ============================================================ */
.faq { margin-top: 1.5rem; }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.8); padding: 16px 0; }
.faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.8); }
.faq-q { font-size: 0.92rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.faq-a { font-size: 0.88rem; color: var(--dark); }

/* ============================================================
   FEATURES LIST (Skill Intelligence)
   ============================================================ */
.feat-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 10px; }
.feat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.feat-check {
  width: 24px; height: 24px;
  background: var(--teal);
  color: var(--white);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feat-check svg { width: 13px; height: 13px; }
.feat-row span { font-size: 0.9rem; font-weight: 400; color: var(--dark); }

/* ============================================================
   LOGOS ROW (Skill Intelligence)
   ============================================================ */
.logos-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.clients-row {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  gap: 16px;
}
.client-logo {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (max-width: 900px) {
  .clients-row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .clients-row { grid-template-columns: repeat(3, 1fr); }
}
.client-logo img { width: 100%; height: auto; display: block; }
.logo-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  height: 56px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--dark-mid);
  background: var(--white);
}
.logo-box-img {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 22px;
  background: var(--white);
  width: 120px; height: 56px;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form { margin-top: 1.5rem; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 782px; margin-left: auto; margin-right: auto; } /* ueberall gleich breit */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-form input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.9);
  font-size: 0.88rem;
  color: var(--dark);
  font-family: var(--font);
  transition: border-color 0.2s;
}
.contact-form input:focus { outline: none; border-color: var(--white); background: var(--white); }
.contact-form input::placeholder { color: var(--mid); }
.contact-form.on-white input {
  border-color: var(--border);
  background: var(--white);
}
.contact-form.on-white input:focus { border-color: var(--teal); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--white); padding: 24px 0; margin-top: auto; position: relative; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; }
.footer-right { text-align: right; }
.footer-copy { color: var(--mid); font-size: 0.8rem; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.footer-copy a { color: var(--dark-mid); font-size: 0.78rem; transition: color var(--transition); }
.footer-copy a:hover { color: var(--dark); }

/* ============================================================
   UTILITY
   ============================================================ */
.mt-sm  { margin-top: 0.75rem; }
.mt-md  { margin-top: 1.25rem; }
.mt-lg  { margin-top: 2rem; }
.teal-text { color: var(--dark); }
.title-dot--teal { color: var(--teal); }
.title-dot--green { color: var(--green); }
.section:nth-of-type(even) .title-dot,
.section-slim:nth-of-type(even) .title-dot { color: var(--teal-dark); }
.section:nth-of-type(odd) .title-dot--teal,
.section-slim:nth-of-type(odd) .title-dot--teal { color: var(--green); }
.section:nth-of-type(even) h2,
.section-slim:nth-of-type(even) h2 { padding-top: 8rem; }
.section:nth-of-type(even),
.section-slim:nth-of-type(even) { padding-bottom: 9rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1300px) {
}
@media (max-width: 960px) {
  .cards-4   { grid-template-columns: repeat(2, 1fr); }
  .stats-4   { grid-template-columns: repeat(2, 1fr); }
  .hero-home .hero-inner { flex-direction: column; gap: 32px; }
  .hero-home .hero-img { width: 100%; flex: none; max-width: 340px; order: -1; }
}
@media (max-width: 879px) {
  .nav-links { display: none; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--white); padding: 12px 0 48px; }
  .nav-links.open { display: flex; }
  .nav-links li::before { display: none !important; }
  .nav-links > li:first-child { margin-top: 24px; }
  .nav-links li a { padding: 10px 24px; font-size: 0.9rem; }
  .hamburger { display: flex; }
  .lang-dropdown { display: flex; justify-content: center; margin: 4px 0 0; }
  .lang-dropdown-toggle { display: none; }
  .lang-dropdown-menu {
    display: flex;
    position: static;
    transform: none;
    box-shadow: none;
    background: none;
    padding: 0;
    margin: 0;
    gap: 4px;
  }
  .lang-dropdown-menu li a { padding: 6px 10px; }
}
@media (max-width: 680px) {
  .cards-3,
  .cards-3.cards-2 { grid-template-columns: 1fr; }
  .cards-4   { grid-template-columns: 1fr; }
  .stats-4   { grid-template-columns: repeat(2, 1fr); }
  .stat-boxes { grid-template-columns: repeat(2, 1fr); }
  .form-row  { grid-template-columns: 1fr; }
  .process-step { flex-direction: column; gap: 12px; }
  .step-img { display: none; } /* Prozess-Bilder auf dem Handy ausgeblendet */
  .footer-inner { flex-direction: column; gap: 24px; text-align: center; }
  .footer-right { text-align: center; }
  .footer-copy { justify-content: center; gap: 6px 16px; }
  .footer-copyright { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
}
@media (max-width: 480px) {
  /* Seitenrand auf dem Handy mind. 24px */
  .container, .container-sm, .container-xs, .container-wide { padding: 0 24px; }
  .nav-inner { padding: 0 24px; }
  .section { padding: 60px 0; }
  .section-balanced { padding: 56px 0; }
  /* Lauftext auf dem Handy leicht kleiner (Basis 15px): Intro- und Abschnittstexte ca. 14px */
  p { font-size: 0.92rem; }
  .hero-page p, .hero-home .hero-text p, .section-sub, .section-sub-white { font-size: 0.93rem; }
  .img-before-title--spaced { margin-top: 3rem; }
  .img-before-title--top { margin-top: 0; }
  .img-laptop { max-width: 260px; }
  .section.section-tight-bottom,
  .section:nth-of-type(n).section-tight-bottom { padding-bottom: 60px; }
  .si-berufe-img { max-width: 240px; margin-top: 2rem; }
  .btn-lg { padding: 13px 16px; font-size: 0.85rem; }
  .img-before-title + h2,
  .section:nth-of-type(n) .img-before-title + h2 { padding-top: 1.5rem; }
  .hero-home { padding: 56px 0 44px; }
  .hero-page { padding: 60px 0 48px; }
  .stat-boxes, .stats-4, .cards-4 { grid-template-columns: 1fr; }
  .logos-row { justify-content: center; }
  .btn-full { width: 100%; }
}

/* Wireframe fixes: static solution blocks and alternating module backgrounds */
.section-mint { background: transparent; }
.solution-blocks {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.solution-block {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 30px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
/* Button "Angebot erhalten" immer unten in der Karte */
.solution-cta { margin-top: auto; align-self: flex-start; }
/* kleiner Sekundaer-Button (Angebot erhalten, Mehr erfahren) */
.btn-sm { padding: 7px 16px; font-size: 0.8rem; }
.card-entry .btn-sm { align-self: flex-start; }
/* feine Linie zwischen Text und Aufzaehlung (Startseite, Einstiegskarten) */
.card-entry .card-bullets { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 4px; }
.solution-block .card-bullets { margin-bottom: 24px; }
/* breiterer Container nur fuer die drei Produkt-Kaesten */
.container-wide { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
/* Produktbezeichnung (Matching Slot / Credit / Talentpool) als Titel, Kartentitel darunter als Untertitel */
.solution-block .card-tag {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
  color: var(--dark);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
.solution-block .card-tag::after { content: ':'; }
.solution-block .card-tag + h3 { font-size: 1.4rem; font-weight: 700; line-height: 1.45; color: var(--dark); }
.solution-block img {
  width: 100%;
  margin-top: 0;
  margin-bottom: 20px;
  display: block;
  /* aspect-ratio: 3 / 2; */
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.solution-block h3 {
  font-size: 1.4rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
  color: var(--dark);
}
.solution-block p {
  font-size: 0.875rem;
  line-height: 1.8;
  margin-bottom: 14px;
  color: var(--dark);
}
.solution-block .card-bullets li { font-size: 0.875rem; line-height: 1.8; }
/* feine Linie zwischen Lauftext und Haekchen-Liste */
.solution-benefits-label {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.solution-block strong {
  font-size: 0.875rem;
  color: var(--dark);
  font-weight: 700;
}
@media (max-width: 1100px) {
  .solution-blocks { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
/* Mobile: Produkttitel klar kleiner als der Abschnittstitel (h2 = 1.3rem) */
@media (max-width: 680px) {
  .solution-block { padding: 22px 20px; }
  .solution-block .card-tag,
  .solution-block .card-tag + h3 { font-size: 1.1rem; line-height: 1.35; }
  .solution-block p,
  .solution-block .card-bullets li,
  .solution-block strong { font-size: 0.85rem; }
}

/* ============================================================
   OVERLAY "Angebot erhalten" (Talente gewinnen)
   ============================================================ */
.offer-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.offer-modal[hidden] { display: none; }
.offer-modal-backdrop { position: absolute; inset: 0; background: rgba(40,48,60,0.55); }
.offer-modal-dialog {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(40,48,60,0.3);
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 48px;
}
.offer-modal-dialog h3 { font-size: 1.6rem; margin-bottom: 0.5rem; }
.offer-modal-text { font-size: 0.9rem; margin-bottom: 0.5rem; }
.offer-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--dark); color: var(--white);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.offer-form { margin-top: 1.5rem; margin-bottom: 0; gap: 14px; }
.offer-modules-label { margin-bottom: 2px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--teal-dark); }
.offer-modules { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 14px; }
.offer-module {
  display: flex; gap: 8px; align-items: flex-start;
  border: 1.5px solid var(--border); border-radius: 6px;
  padding: 14px 16px; font-size: 0.85rem; line-height: 1.4; color: var(--dark);
  cursor: pointer; text-align: left;
}
.offer-module strong { font-size: 0.95rem; }
.offer-module br { display: none; }
.offer-module span strong::after { content: ': '; }
.offer-module span strong:only-child::after { content: none; }
.offer-modal .offer-module input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 18px; height: 18px; padding: 0; margin-top: 1px; border: 1.5px solid var(--dark-mid); border-radius: 3px;
  background: var(--white); cursor: pointer; display: grid; place-content: center;
}
.offer-modal .offer-module input:checked { background: var(--dark); border-color: var(--dark); }
.offer-modal .offer-module input:checked::after {
  content: ''; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.offer-modal .offer-module input:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.offer-module:has(input:checked) { border-color: var(--teal); background: rgba(110,211,206,0.12); }
.offer-module-error { color: var(--error); font-size: 0.85rem; margin: 0; }
.offer-submit { align-self: flex-start; margin-top: 6px; }
/* feine Linie zwischen Angebotsauswahl und Kontaktdaten */
.offer-contact-label { border-top: 1px solid var(--border); margin-top: 4px; }
.offer-form .offer-modules-label { padding-top: 24px; }
.offer-modules { margin-bottom: 8px; }
body.offer-modal-open { overflow: hidden; }
@media (max-width: 560px) {
  .offer-modal-dialog { padding: 28px 20px; }
  .offer-modal .form-row { grid-template-columns: 1fr; }
  /* iOS zoomt bei Schrift unter 16px ins Feld */
  .offer-modal input { font-size: 16px; }
  .offer-modal-dialog h3 { font-size: 1.25rem; padding-right: 40px; }
}

/* ============================================================
   MOBILE: Abstand Welle -> Titel kleiner als auf Desktop
   Welle = 41px hoch (oben in jedem zweiten Abschnitt). Ziel: ca. 48px Luft
   zwischen Welle bzw. Abschnittsbeginn und Titel, unten entsprechend.
   ============================================================ */
@media (max-width: 680px) {
  .section,
  .section.section-tight-bottom,
  .section:nth-of-type(n).section-tight-bottom { padding-top: 0; padding-bottom: 48px; }
  .section:nth-of-type(even),
  .section:nth-of-type(even).section-tight-bottom { padding-bottom: calc(41px + 48px); }
  .section > div > h2:first-child { padding-top: 48px; }
  .section:nth-of-type(even) > div > h2:first-child { padding-top: calc(41px + 48px); }
  /* Bild als erstes Element (z.B. Laptop vor Titel): gleiche Luft ueber dem Bild */
  .section > div > .img-before-title:first-child { margin-top: 48px; }
  .section:nth-of-type(even) > div > .img-before-title:first-child { margin-top: calc(41px + 48px); }
  .section-balanced { padding: 0 0 48px; }
  .section-balanced:nth-of-type(even) { padding-bottom: calc(41px + 48px); }
}

/* Bestaetigung im Overlay nach dem Absenden */
.offer-success { text-align: center; padding: 24px 0 8px; }
.offer-success[hidden] { display: none; }
.offer-success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--teal); color: var(--white); font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.offer-success-title { font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.offer-success p { margin-bottom: 20px; }
.offer-form[hidden] { display: none; }

/* Skill Intelligence: Zielgruppen und Leistungsmodule */
.si-cards { align-items: stretch; margin-top: 2rem; }
.si-cards .card { display: flex; flex-direction: column; padding: 26px 24px; }
.si-cards .card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.si-card-lead { font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.si-cards .card p { font-size: 0.88rem; }
.si-example { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-size: 0.82rem; color: var(--dark-mid); line-height: 1.55; }
.si-example span { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--teal-dark); margin-bottom: 4px; }
.si-module-card > p { margin-bottom: 16px; }
.si-module-cta { align-self: flex-start; margin-top: 18px; }
.si-example { margin-top: auto; }

/* Zielgruppen untereinander: links Titel + Kernsatz, rechts Text */
.si-target-list { display: flex; flex-direction: column; gap: 14px; max-width: 900px; margin: 2rem auto 0; }
.si-target-card { display: grid; grid-template-columns: 300px 1fr; column-gap: 36px; padding: 26px 30px; }
.si-target-card h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.si-target-card .si-card-lead { margin-bottom: 0; }
.si-target-text { font-size: 0.88rem; margin: 0; align-self: stretch; display: flex; align-items: center; padding-left: 36px; border-left: 1px solid var(--border); }
@media (max-width: 760px) {
  .si-target-card { grid-template-columns: 1fr; row-gap: 10px; padding: 22px 20px; }
  .si-target-text { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: 12px; }
}

/* Startseite: Einstiegskarten wie die Produktkarten («Matching Slot: / Qualifizierte Bewerbungen») */
.card-entry .entry-title { font-size: 1.4rem; line-height: 1.35; margin-bottom: 0; color: var(--dark); }
.card-entry .entry-title::after { content: ':'; }
.card-entry .entry-sub { font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: var(--teal-dark); flex: none; margin: -8px 0 6px; }
@media (max-width: 680px) { .card-entry .entry-title { font-size: 1.1rem; } .card-entry .entry-sub { font-size: 0.98rem; } }
}
}

/* Mobile: Karten-Texte einheitlich wie die uebrigen Karten (Titel 0.92rem, Text 0.85rem) */
@media (max-width: 680px) {
  .tile-card { padding: 18px 18px; gap: 12px; }
  .tile-card h3 { font-size: 0.92rem; }
  .tile-card p { font-size: 0.85rem; }
  .tile-num { transform: scale(0.88); transform-origin: top left; }
  .card-entry h3, .solution-block .card-tag, .solution-block .card-tag + h3 { font-size: 1.05rem; }
  .si-cards .card h3, .si-target-card h3 { font-size: 1rem; }
  .si-cards .card p, .si-target-text, .si-card-lead { font-size: 0.85rem; }
  .faq-q { font-size: 0.92rem; }
  .faq-a { font-size: 0.85rem; }
  .check-row span, .feat-row span { font-size: 0.85rem; }
  .stat-big { font-size: 1.6rem; }
  .testimonial-quote { font-size: 0.9rem; }
  .section .section-sub, .section .section-sub-white { font-size: 0.93rem; }
}


/* Startseite: Icons in den Einstiegskarten */
.card-entry .card-icon { width: 38px; height: 38px; margin-bottom: 2px; color: #2fa59d; }

/* ZHdK SkillMatching */
.zhdk-label { display: inline-block; margin-top: 2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dark-mid); border-bottom: 2px solid var(--white); padding-bottom: 4px; }
.zhdk-label + h1 { margin-top: 1rem; }
.zhdk-content { display: flex; flex-direction: column; gap: 20px; padding-top: calc(41px + 3.5rem); } /* 41px = Welle */
.zhdk-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px 38px; margin-top: 0; }
.zhdk-card h3 { margin-top: 0; }
@media (max-width: 680px) { .zhdk-card { padding: 24px 20px; } .zhdk-content { padding-top: calc(41px + 32px); } }

/* Lebenslauf-Upload (cv-upload-szkb) */
.cv-header { padding: 22px 32px; }
.cv-page { padding-top: 3rem; min-height: 70vh; }
.cv-page .cv-title { text-align: center; font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-bottom: 1.5rem; }
.cv-intro { text-align: center; max-width: 920px; margin: 0 auto 2.5rem; color: var(--dark); line-height: 1.75; }
.cv-form { max-width: 760px; margin: 0 auto; }
.cv-label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--dark); margin: 0 0 8px; }
.cv-input { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 6px; background: var(--white); font-size: 0.95rem; margin-bottom: 28px; font-family: inherit; }
.cv-input:focus { outline: none; border-color: var(--teal); }
.cv-file { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; cursor: pointer; }
.cv-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cv-file-btn { display: inline-flex; gap: 8px; align-items: center; background: #7d8a91; color: var(--white); padding: 10px 18px; border-radius: 4px; font-size: 0.95rem; }
.cv-file:hover .cv-file-btn { background: #6a777e; }
.cv-file input:focus-visible + .cv-file-btn { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.cv-file-name { font-size: 0.85rem; color: var(--dark); font-weight: 600; }
.cv-hint { font-size: 0.78rem; color: var(--dark-mid); margin: 8px 0 30px; }
.cv-checks { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.cv-check { display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--dark); line-height: 1.45; cursor: pointer; }
.cv-check input {
  appearance: none; -webkit-appearance: none; flex-shrink: 0;
  width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--dark-mid); border-radius: 3px;
  background: var(--white); cursor: pointer; display: grid; place-content: center;
}
.cv-check input:checked { background: var(--dark); border-color: var(--dark); }
.cv-check input:checked::after {
  content: ''; width: 5px; height: 10px; margin-top: -2px;
  border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cv-check input:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.cv-check a { color: var(--dark); text-decoration: underline; }
.cv-error { color: var(--error); font-size: 0.88rem; margin-bottom: 14px; }
.cv-thanks { text-align: center; padding-top: 2rem; }
.cv-thanks[hidden], #cvForm[hidden] { display: none; }
.cv-thumb { width: 84px; height: 84px; color: var(--teal); margin: 0 auto 1rem; display: block; }
.cv-thanks p { color: var(--dark); }
@media (max-width: 680px) { .cv-header { padding: 18px 24px; } .cv-page { padding-top: 1.5rem; } .cv-intro { text-align: left; } }

/* Ueber uns: E-Mail-Link unter jeder Person */
.team-mail { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.72rem; color: var(--dark-mid); text-decoration: none; opacity: 0.85; }
.team-mail:hover { color: var(--dark); text-decoration: underline; opacity: 1; }
.team-mail svg { width: 14px; height: 14px; flex-shrink: 0; }

/* CV-Seiten: mehr Luft zwischen «Einreichen» und Footer */
.section.section-last.cv-page { padding-bottom: 7rem; }
@media (max-width: 680px) { .section.section-last.cv-page { padding-bottom: 80px; } }

/* Testimonial-Slider: dezente Pfeile links/rechts (nur Desktop) */
.testimonial-slider { padding: 0 56px; max-width: 1012px; }
.testimonial-arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent;
  color: var(--dark); opacity: 0.35; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: opacity var(--transition), background var(--transition);
}
.testimonial-arrow:hover { opacity: 0.85; background: rgba(255,255,255,0.4); }
.testimonial-arrow:focus-visible { outline: 2px solid var(--teal-dark); opacity: 0.85; }
.testimonial-arrow svg { width: 24px; height: 24px; }
.testimonial-arrow--prev { left: 4px; }
.testimonial-arrow--next { right: 4px; }
.testimonial-slider .testimonial-card:not(.active) { left: 56px; right: 56px; }
@media (max-width: 760px) { .testimonial-slider .testimonial-card:not(.active) { left: 0; right: 0; } }
@media (max-width: 760px) { .testimonial-arrow { display: none; } .testimonial-slider { padding: 0; max-width: 900px; } }

/* Cookie-Hinweis (Google Analytics) – schmale weisse Leiste unten, wie bei den Stellenanzeigen */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2001;
  background: var(--white); box-shadow: 0 -4px 20px rgba(40,48,60,0.10);
  padding: 14px 32px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.cookie-banner[hidden] { display: none; }
.cookie-overlay { position: fixed; inset: 0; z-index: 2000; background: rgba(28,34,46,0.5); }
.cookie-overlay[hidden] { display: none; }
.cookie-banner p { font-size: 0.82rem; color: var(--dark); margin: 0; flex: 0 1 auto; }
.cookie-banner a { color: var(--teal-dark); text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-actions .btn { border-radius: 999px; padding: 6px 16px; font-size: 0.78rem; }
@media (max-width: 560px) { .cookie-banner { padding: 12px 16px; gap: 10px; } .cookie-banner p { flex-basis: 100%; text-align: center; } .cookie-actions { width: 100%; justify-content: center; } }