/* ============================================================================
   hochzwei.tech 2026 Rebrand: geteilte Sektions-Komponenten
   Baustelle dieser Datei: alles, was ZWEI ODER MEHR Seiten brauchen, aber
   NICHT alle. Was jede Seite braucht, gehoert in core.css; was genau eine
   Seite braucht, in ihr eigenes Sektions-CSS.
   Herausgeloest aus index.css, das faktisch zur Shared-Datei geworden war und
   auf neun Seiten lag, obwohl dort nur 19 bis 37 Prozent davon greifen.
   Reihenfolge im Ladepfad: core.css, shared.css, seite.css.
   No em-dashes or en-dashes anywhere (brand rule), comments included.
   ========================================================================== */

/* ============================================================================
   hochzwei.tech 2026 Rebrand: Home page sections
   Depends on core.css for tokens, primitives and shared components.
   No em-dashes or en-dashes anywhere (brand rule), comments included.
   ========================================================================== */

/* HERO ===================================================================== */
.hero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) var(--space-section); }

.hero__inner {
  display: grid;
  grid-template-columns: 1.30fr 0.70fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

.hero__kicker { margin-bottom: var(--space-5); max-width: 100ch; color: var(--c-text); }
/* Eyebrows above headings: drop the bracket glyphs (per screenshot). */
.hero__kicker.mono-label::before, .hero__kicker.mono-label::after,
.sec-head__kicker.mono-label::before, .sec-head__kicker.mono-label::after { content: ""; }
/* Same size everywhere a .hero__title appears (home, modern-workplace,
   security, power-platform, ai-copilot, erstgespraech): matches the
   uu.css .hero__title used by ueber-uns/karriere (their own bundle, no
   index.css), so every page's hero headline reads at the same weight. */
.hero__title {
  font-size: calc(var(--fs-display) * 1.3);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
  text-wrap: pretty;
}

.hero__lead { font-size: var(--fs-lead); color: var(--c-text); max-width: 46ch; margin-bottom: var(--space-6); }
/* Two-CTA hero row (modern-workplace, ai-copilot, security): a touch smaller
   than the global .btn so the pair stays as light as the single Home CTA. */
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }

.hero__cta .btn { min-height: 46px; padding: 0.55em 1.2em; font-size: 1rem; }

.hero__media { position: relative; border-radius: var(--radius-lg); aspect-ratio: 1 / 1; background: var(--c-surface-2); }

.hero__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); filter: grayscale(1); }
/* Home light: Logo dauerhaft schwarz. Die gescrollte [2]-Marke bleibt auf jedem
   Band schwarz, statt ueber blauen Baendern auf weiss zu springen. Nur Home
   (data-page="home"); die anderen Seiten laden index.css mit, sind aber nicht betroffen. */
html[data-theme="light"][data-page="home"] .site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--white { display: none; }

html[data-theme="light"][data-page="home"] .site-header.is-scrolled[data-nav-bg="blue"] .logo__mark--black { display: block; }
/* REIFEGRADCHECK CARDS (white by default, blue on hover) =================== */
.check-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  background: var(--c-surface);
  border: 1.5px solid var(--c-brand);
  border-radius: var(--radius-lg);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.check-card__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }

.check-card__body { font-size: var(--fs-body); color: var(--c-text); flex: 1; }

.check-card .btn { align-self: flex-start; margin-top: var(--space-2); }

.check-card:hover {
  background: var(--c-brand);
  color: var(--c-brand-ink);
  border-color: transparent;
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
}

.check-card:hover .check-card__body { color: var(--c-brand-ink); opacity: 0.92; }

.check-card:hover .mono-label { color: var(--c-brand-ink); opacity: 0.9; }

.check-card:hover .check-card__title .marker { background: var(--c-accent); color: var(--blue); }

.check-card:hover .btn { --btn-bg: var(--white); --btn-fg: var(--blue); }
/* MODUL-TILES (check-card with mono index + status dot). Shared by
   modern-workplace (Fünf Bausteine) and security (Vier Säulen). ========== */
.modul-tile { position: relative; }

.modul-tile__tags { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: auto; }
/* Hover-only inversions (the check-card hover already flips bg to blue). */
.modul-tile:hover .tag { color: var(--c-accent); }

.modul-tile:hover .tag::before,
.modul-tile:hover .tag::after { color: var(--white); }
/* STATS (Aus der Praxis) =================================================== */
.praxis-title { text-align: center; margin: var(--space-9) 0 var(--space-7); font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); text-align: center; }

.stats__num { font-size: clamp(2.5rem, 1.76rem + 3.05vw, 5rem); font-weight: 600; line-height: 1; color: var(--c-brand-ink); }

.stats__label { font-size: var(--fs-lead); opacity: 0.92; margin-top: var(--space-3); }

.stats__src { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 3px; opacity: 0.85; margin-top: var(--space-2); }
/* TESTIMONIALS / CASES (carousel) ========================================= */
.cases-wrap { position: relative; }

.cases {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(300px, 40%); /* ~2 full cards + a split */
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--space-3);
  scrollbar-width: none;
}

.cases::-webkit-scrollbar { display: none; }

.quote {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
  --bk: var(--c-brand);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.quote:hover, .quote.is-active { background: var(--c-brand); color: var(--c-brand-ink); border-color: transparent; --bk: var(--c-accent); box-shadow: var(--shadow-pop); }

.quote:hover { transform: translateY(-4px); }

.quote__company { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }

.quote__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
/* grid w/ a max-content column: every line is the width of the longest tag, uniform */
.quote__tags { display: grid; grid-template-columns: max-content; }
/* tags divided by thin lines instead of brackets, in natural case */
/* All meta lines equal length: the longest tag text + 28px, uniform across the card. */
.quote__tags .tag { text-transform: none; color: var(--c-text); padding: var(--space-1) 28px var(--space-1) 0; border-bottom: 1px solid var(--c-border); }
/* Testimonial tags stay line-divided, not bracketed (overrides the global tag brackets). */
.quote__tags .tag::before, .quote__tags .tag::after { content: ""; }

.quote:hover .quote__tags .tag, .quote.is-active .quote__tags .tag { color: var(--c-brand-ink); opacity: 0.92; border-bottom-color: rgba(255, 255, 255, 0.3); }
/* no clamp: if the quote runs long, the card grows taller instead of cutting off */
.quote__text { font-size: var(--fs-body); line-height: 1.4; flex: 1; }

.quote__foot { border-top: 1px solid var(--c-border); padding-top: var(--space-4); }

.quote:hover .quote__foot, .quote.is-active .quote__foot { border-top-color: rgba(255, 255, 255, 0.3); }

.quote__author { font-weight: 700; font-size: var(--fs-body); }

.quote__role { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 3px; color: var(--c-text-muted); }

.quote:hover .quote__role, .quote.is-active .quote__role { color: var(--c-brand-ink); opacity: 0.85; }

.cases-nav { display: flex; gap: var(--space-3); margin-top: var(--space-5); }

.cases-nav__btn {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 1.3rem;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.cases-nav__btn:hover { background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent); }
/* Compact the section so eyebrow -> nav fits in roughly one screen (same compaction
   token as #reifegradcheck / #recruiting). */
#testimonials.section { padding-block: var(--space-7); }

#testimonials .sec-head { margin-bottom: var(--space-6); }

.cases-nav { margin-top: var(--space-4); }
/* MANAGED SERVICES (white by default, blue on hover) ======================= */
.ms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Lange deutsche Komposita wie "Informationssicherheit" setzen die
     min-content-Breite der Karte. Ohne min-content-Sperre drueckt eine solche
     Karte ihre 1fr-Spalte breiter als die Nachbarn, und die Kartenzeile laeuft
     sichtbar ungleich (gemessen auf /wissen: 368 / 397 / 343 statt 3 x 369). */
  min-width: 0;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
/* tall FAQ-style brackets on the left + right edges (white on hover).
   Shared with the Reifegradcheck cards (.check-card) so both look identical. */
.ms-card::before,
.ms-card::after,
.check-card::before,
.check-card::after {
  content: "";
  position: absolute;
  top: var(--space-5);
  bottom: var(--space-5);
  width: 16px;
  border: 4.2px solid transparent;
  pointer-events: none;
  transition: border-color var(--transition);
}

.ms-card::before, .check-card::before { left: 14px; border-right: 0; border-radius: 8px 0 0 8px; }

.ms-card::after,  .check-card::after { right: 14px; border-left: 0; border-radius: 0 8px 8px 0; }

.ms-card:hover { background: var(--c-brand); color: var(--c-brand-ink); border-color: transparent; transform: translateY(-4px); box-shadow: var(--shadow-pop); }

.ms-card:hover::before,
.ms-card:hover::after,
.check-card:hover::before,
.check-card:hover::after { border-color: var(--c-brand-ink); }

.ms-card__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; }

.ms-card__body { font-size: var(--fs-body); color: var(--c-text); flex: 1; }

/* Sicherheitsnetz zu min-width: 0. Ein Wort, das in der gleich breiten
   Spalte nicht mehr Platz findet, bricht, statt herauszulaufen. */
/* Nur der Fliesstext darf im Wort brechen. Auf Kartentiteln hinterliess
   break-word Reste wie "Lieferantenfragebog" plus "en" in der naechsten Zeile.
   Die Titel sind kurz genug, um ungebrochen in die Karte zu passen, und
   min-width auf .ms-card haelt die Spalten trotzdem gleich breit. */
.ms-card__title { overflow-wrap: normal; }
.ms-card__body { overflow-wrap: break-word; }

/* Vier Artikelgruppen auf /wissen hintereinander ergaeben mit dem vollen
   Section-Rhythmus bis zu 192px Leerflaeche zwischen Ueberschrift und
   Ueberschrift. Sie nutzen deshalb die kompakte Stufe (--space-7), dieselbe
   wie #testimonials und #recruiting. */
.section--wissen { padding-block: var(--space-7); }

.ms-card .mono-label { color: var(--c-brand-text); }

.ms-card:hover .mono-label { color: var(--c-brand-ink); opacity: 0.9; }

.ms-card:hover .ms-card__body { color: var(--c-brand-ink); opacity: 0.9; }

.ms-card .btn { align-self: flex-start; }

.ms-card:hover .btn { --btn-bg: var(--c-accent); --btn-fg: var(--c-accent-ink); border-color: transparent; }
/* Offering price line. All four cards are identical outlined cards that fill
   blue only on hover (no pre-selected "feature" card, per request). */
.ms-card__price { font-size: var(--fs-body); color: var(--c-text-muted); }

.ms-card__price span { display: inline-block; font-size: var(--fs-lead); font-weight: 700; color: var(--c-text); }

.ms-card:hover .ms-card__price, .ms-card:hover .ms-card__price span { color: var(--c-brand-ink); opacity: 0.95; }
/* Dark mode: home "Wir suchen Dich" highlight is black type on the blue box. */
[data-theme="dark"] #recruiting .marker { color: var(--ink); }
/* Baseline strip: what every managed service includes (ported from sub-pages) */
.ms-baseline__caption { display: block; color: var(--c-text-muted); margin: var(--space-7) 0 var(--space-4); }

.ms-baseline {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin: 0 0 var(--space-7);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}

.ms-baseline li { font-size: var(--fs-body); color: var(--c-text-muted); line-height: 1.35; }

.ms-baseline__key {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--c-brand-text);
  margin-bottom: var(--space-2);
}
/* Build -> Run handover: a horizontal, pinned mini-timeline. Same mechanic and
   marker style as the ueber-uns page (JS adds .is-pinned on wide + motion-ok;
   scroll then advances the active step). Static / mobile = all steps readable. */
.handover { position: relative; margin: 0 0 calc(var(--space-3) + 20px); --ho-top: 96px; }

.handover__sticky { position: static; }
/* The section heading rides inside the sticky so headline + text stay pinned
   with the steps; this is its gap to the station row. */
.handover .sec-head--beside { margin-bottom: var(--space-6); }

.handover__row {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* exactly equal columns (minmax(0,...) stops a long title widening col 1) and
     no gap, so each marker sits at the column centre = the line's end points */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
/* connecting line behind the markers, at their vertical centre (col 1 to col 3) */
.handover__row::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 16.66%; right: 16.66%;
  height: 2px;
  background: var(--c-text);
  z-index: 0;
}

.handover__station {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 42px var(--space-5) 0;
  transition: opacity var(--transition);
}
/* Same style as the ueber-uns timeline: dim every step, light only the active one
   (scroll-driven, JS-guaranteed). Static / no-JS keeps every step readable. */
.handover.is-pinned .handover__station { opacity: 0.62; }

.handover.is-pinned .handover__station.is-active { opacity: 1; }

.handover__index { color: var(--c-brand-text); margin-bottom: var(--space-2); }

.handover__title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; color: var(--c-text); }

/* Volle Textfarbe, nicht --c-text-muted: die Zuruecknahme inaktiver Stationen
   macht allein die Opazitaet oben. Vorher lagen zwei Abdunklungen uebereinander,
   und im Dunkelmodus fiel #9AA3B4 bei 0.42 auf 2,25:1 gegen den Grund. Mit
   voller Farbe sind es bei 0.62 dann 5,33:1 hell und 6,90:1 dunkel, also AA. */
.handover__body { font-size: var(--fs-body); color: var(--c-text); margin-top: var(--space-3); max-width: 34ch; }
/* Marker = a blue block on the line with white 2-sided brackets ([ ]); the active
   step grows and shows the "2" (the ueber-uns timeline marker, in blue not lime). */
.handover__marker {
  position: absolute;
  top: 13px; left: 50%;                  /* centred on the horizontal connecting line */
  transform: translate(-50%, -50%);
  width: 22px; height: 26px;
  background: var(--c-brand);            /* blue box (lime on ueber-uns) */
  z-index: 2;
  display: grid; place-items: center;
  /* Weight 400 statt 700: der 700er-Schnitt von Space Mono wurde sonst nur fuer
     diese eine Ziffer geholt und hing als laengster Ast im kritischen Pfad
     (17 KiB, direkt vor dem LCP-Text). Alle anderen Mono-Labels sind ohnehin 400. */
  font-family: var(--font-mono); font-weight: 400; line-height: 1;
  color: var(--c-brand-ink);            /* white "2" on the blue box */
  font-size: 0;                          /* no "2" unless this step is active */
  transition: width var(--transition), height var(--transition), font-size var(--transition);
}

.handover__marker::before,
.handover__marker::after {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  width: 6px;
  border: 3px solid var(--c-brand-ink);   /* white brackets sit inside the blue box */
}

.handover__marker::before { left: 3px; border-right: 0; }
   /* [ */
.handover__marker::after { right: 3px; border-left: 0; }
   /* ] */
.handover__station.is-active .handover__marker { width: 32px; height: 34px; font-size: 16px; }
/* Active step text is full ink / white (black in light, white in dark). */
.handover__station.is-active .handover__title,
.handover__station.is-active .handover__body { color: var(--c-text); }
/* 4-column variant (shared: modern-workplace Vorgehen + ai-copilot Wert-Programm).
   Re-grids the row and re-anchors the connecting line. */
.handover__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.handover__row--4::before { left: 12.5%; right: 12.5%; }
/* 5-column variant (mdr: Detect bis Improve). Engere Innenabstaende, sonst
   bleiben bei 5 Spalten nur ~180px Textbreite uebrig. */
.handover__row--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.handover__row--5::before { left: 10%; right: 10%; }

.handover__row--5 .handover__station { padding-inline: var(--space-3); }

@media (min-width: 1025px) {
/* The heading now sits inside the sticky, so the pin is a touch longer and the
     offset smaller, keeping headline + text + steps within one viewport.

     Pin-Hoehe und Sticky haengen bewusst NICHT an .is-pinned: home.js setzt die
     Klasse erst nach dem ersten Paint, und der Block wuchs in diesem Moment von
     seiner Inhaltshoehe (gemessen 543px) auf 165vh. Alles darunter sprang dabei
     um knapp eine Viewport-Hoehe (gemessen 777px bei 800px Viewport), was in den
     Feldwerten als CLS 0.803 an #case und #fragen ankam. Jetzt steht die Box ab
     dem ersten Paint richtig, und .is-pinned traegt nur noch das Dimmen der
     Stationen. Ohne JS ergibt das denselben Pin, nur ohne Schritt-Hervorhebung. */
  .handover { height: 165vh; }
  .handover__sticky {
    position: sticky;
    top: clamp(96px, 13vh, 150px);
  }
}
/* Reduzierte Bewegung: home.js waehlt staticMode und setzt .is-pinned nie, also
   darf hier auch keine Pin-Hoehe stehen. */
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .handover { height: auto; }
  .handover__sticky { position: static; }
}
/* Schluss-CTA im blauen Band. Lag dreimal in Seiten-CSS (security.css,
   modern-workplace.css, ai-copilot.css) und damit auf keiner Seite, die keines
   der drei laedt: die Artikelseite rendert das Markup dann ohne Maxbreite und
   ohne Abstaende, also merklich enger als der Rest der Site. Markup ist auf
   allen sechs Seiten identisch, die Werte kommen aus der Mehrheitsfassung
   (security und modern-workplace). ai-copilot lief auf 62ch, modern-workplace
   hatte unter der Buttonzeile einen zusaetzlichen Abstand ohne Inhalt danach.
   Beides war Drift, nicht Absicht. */
.close-cta { max-width: 70ch; }
.close-cta__text {
  font-size: var(--fs-lead); color: var(--c-brand-ink); opacity: 0.92;
  margin: var(--space-5) 0 var(--space-6); max-width: 56ch;
}
.close-cta__row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* FAQ (blue band; bracket on the right, spans the open item) =============== */
.faq { position: relative; display: flex; gap: var(--space-7); }

.faq__list { flex: 1; min-width: 0; }

.faq__rail { position: relative; flex: none; width: 44px; }

.faq__bracket {
  position: absolute;
  right: 0; top: 0;
  width: 30px;
  height: 64px;
  border: 5.25px solid var(--c-accent);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1), height 360ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, height;
}

.faq__item { border-top: 1px solid rgba(255, 255, 255, 0.25); }

.faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  color: var(--c-brand-ink);
}

.faq__icon { flex: none; font-size: 1.6em; line-height: 1; color: var(--c-accent); transition: transform var(--transition); }

.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__a { padding: 0 0 var(--space-6); font-size: var(--fs-body); color: var(--c-brand-ink); opacity: 0.9; max-width: 80ch; }

.faq__item summary { list-style: none; cursor: pointer; }

.faq__item summary::-webkit-details-marker { display: none; }
/* Highlighted words in the questions: closed = lime type only (no box); when the
   item is open the lime box returns and the type goes blue (normal marker--lime). */
.faq__q .marker--lime { background: transparent; color: var(--c-accent); padding: 0; transition: background var(--transition), color var(--transition); }

.faq__item[open] .faq__q .marker--lime { background: var(--c-accent); color: var(--blue); padding: 0 0.12em; }
/* RECRUITING: title, button, then a two-line text to the RIGHT of the button = */
#recruiting.section { padding-block: var(--space-7); }

.recruit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-block: var(--space-4);
}

.recruit__title { flex: none; max-width: 100%; font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; margin: 0; }
/* Button label centred, never wraps. */
.recruit__cta { flex: none; white-space: nowrap; text-align: center; justify-content: center; }
/* Two-line text sits directly right of the button. */
.recruit__text { flex: 1 1 320px; min-width: 0; max-width: 46ch; font-size: var(--fs-lead); color: var(--c-text); margin: 0; }
/* Pull the team section up under managed services: same ~109px team seam as ueber-uns
   (managed keeps its default bottom; only the team section's top is compacted). */
#menschen { padding-top: var(--space-5); }
/* H6: keep the Reifegradcheck section within roughly one screen */
#reifegradcheck.section { padding-block: var(--space-7); }

#reifegradcheck .sec-head { margin-bottom: var(--space-6); }
/* RESPONSIVE ============================================================== */
@media (min-width: 1024px) {
/* These two sections just get a wider head; the title uses the shared --fs-h1
     and wraps naturally (no bespoke smaller size anymore). */
  #reifegradcheck .sec-head { max-width: none; }
  #testimonials .sec-head { max-width: none; }
}

@media (max-width: 1024px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; aspect-ratio: 16 / 10; }
  .ms-baseline { grid-template-columns: repeat(2, 1fr); }
  .faq { gap: var(--space-5); }
  .faq__rail { width: 30px; }
}

@media (max-width: 640px) {
  .stats { grid-template-columns: 1fr; }
  .ms-baseline { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .handover__row { grid-template-columns: 1fr; gap: var(--space-5); }
  .handover__row::before { display: none; }
  .handover__station { flex-direction: row; align-items: flex-start; gap: var(--space-5); text-align: left; padding-top: 0; }
  .handover__marker { position: relative; top: 0.15em; left: auto; transform: none; flex: 0 0 26px; }
  .faq__rail { display: none; }
}
/* Photography: grayscale by default, colour on hover */
.hero__media img, .approach__media img, .quote__media img { transition: filter 450ms ease; }

.hero__media:hover img, .approach:hover img, .quote:hover img, .quote.is-active img { filter: grayscale(0); }
/* Cards: quiet scale added to the existing lift */
.quote:hover, .check-card:hover, .pillar:hover, .ms-card:hover { transform: translateY(-4px) scale(1.01); }
/* Reifegradcheck meta line (once, under the section intro) */

/* ============================================================================
   2026-06 Web + Mobile refinements (Home)
   ========================================================================== */
/* Dark: "In jedem Managed Service enthalten" + the four lines go white, not grey. */
[data-theme="dark"] .ms-baseline__caption,
[data-theme="dark"] .ms-baseline li { color: var(--c-text); }
/* Dark: --c-brand als Textfarbe (statt als Flaechenfarbe) faellt unter 4.5:1
   auf dunklem Grund. Fuer diese vier kleinen Labels/Tags deshalb weiss statt
   blau; betrifft nur Dark Mode, Light Mode (Blau auf Weiss) bleibt unveraendert. */
[data-theme="dark"] .approach__foot,
[data-theme="dark"] .ms-card .mono-label,
[data-theme="dark"] .ms-baseline__key { color: var(--c-text); }

@media (max-width: 640px) {
  .hb-d { display: none; }
}

@media (max-width: 640px) {
/* ---- HERO: kicker, smaller image, 2-line headline, body, button; one view ---- */
  .hero { padding-block: var(--space-5) var(--space-6); }
  .hero__inner { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
/* This reorder/flex-gap pattern only applies where .hero__copy actually
     wraps the kicker/title/lead/cta (the 2-col image hero: home, mw, pp,
     ai-copilot, security). Pages without .hero__copy keep their normal
     margin-based spacing. */
  .hero__copy { display: contents; }
  .hero__copy .hero__kicker { order: 1; margin-bottom: 0; }
/* Horizontal hero image (was square) frees vertical room for a bigger headline. */
  .hero__media { order: 2; aspect-ratio: 16 / 9; width: 82%; align-self: flex-start; }
/* absolute so the figure's aspect-ratio sets the height, not the image's intrinsic size */
  .hero__media img { position: absolute; inset: 0; }
  .hero__copy .hero__title { order: 3; margin-bottom: 0; }
  .hero__copy .hero__lead { order: 4; margin-bottom: 0; }
  .hero__copy .btn { order: 5; align-self: flex-start; }
/* Heroes mit zwei Buttons bündeln sie in einem .hero__cta-Wrapper. Der ist
     selbst das Flex-Kind und braucht die Order, sonst sortiert er als 0 vor
     den Kicker. Modern Workplace und AI/Copilot setzen sie seitenweise auf 4
     (dort steht das Bild zuletzt) und ueberschreiben das hier. */
  .hero__copy .hero__cta { order: 5; align-self: flex-start; margin-bottom: 0; }
/* ---- Four-area tiles stay two-up; the managed-service cards do NOT: their
     German copy ("Schutzmassnahmen") breaks ugly in ~175px columns on phones,
     so they fall back to the core.css single column. ---- */
  #bereiche .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  #managed-services .grid-4 { gap: var(--space-4); }
  .ms-card { padding: var(--space-5); gap: var(--space-3); }
/* ---- Reifegrad cards: compact so all three land in roughly one view ---- */
  #reifegradcheck .grid-3 { gap: var(--space-4); }
  .check-card { padding: var(--space-5); gap: var(--space-3); }
/* ---- Seiten-Klammer laenger auf Mobil: die kompakten Karten sind kuerzer,
     der feste 24px-Einzug (Desktop-Wert) liess davon zu wenig sichtbare Hoehe
     uebrig, wirkte wie ein kurzer Eck-Strich statt einer durchgehenden Klammer. ---- */
  .check-card::before, .check-card::after,
  .ms-card::before, .ms-card::after { top: var(--space-3); bottom: var(--space-3); }
/* ---- References: logo above the author name, compact, one card per swipe ---- */
  .cases { grid-auto-columns: 86%; }
  .quote { padding: var(--space-4); gap: var(--space-2); }
  .quote__head { display: contents; }
  .quote__company { order: 2; }
  .quote__tags { order: 3; }
  .quote__tags .tag { padding-top: 2px; padding-bottom: 2px; }
  .quote__text { order: 4; line-height: 1.4; }
  .quote__foot { order: 6; padding-top: var(--space-3); }
/* ---- FAQ: #9 die animierte lime-Klammer sitzt mobil RECHTS vom Antworttext
     (] statt [), beginnend unter der Frage-Zeile. ---- */
  .faq__q { padding: var(--space-4) 0; }
  .faq__a { position: relative; padding-bottom: var(--space-5); }
  .faq__item[open] .faq__a { padding-right: 18px; }
  .faq__item[open] .faq__a::before {
    content: ""; position: absolute; right: 0; top: 0; bottom: var(--space-3);
    width: 11px; border: 4px solid var(--c-accent); border-left: 0; border-radius: 0 9px 9px 0;
    transform-origin: top; animation: faqBracketDraw 320ms cubic-bezier(0.4, 0, 0.2, 1);
  }
/* ---- Handover: vertical timeline rail + the "2" jumps between steps (home.js) ---- */
  .handover__row { grid-template-columns: 1fr; gap: var(--space-6); position: relative; }
  .handover__row::before {
    display: block;
    top: 14px; bottom: 30px; left: 12px; right: auto;
    width: 2px; height: auto;
  }
  .handover__station { flex-direction: row; align-items: flex-start; gap: var(--space-5); text-align: left; padding: 0; }
  .handover__marker { position: relative; top: 0.1em; left: auto; transform: none; flex: 0 0 26px; }
  .handover.is-mobile .handover__station { opacity: 0.62; transition: opacity var(--transition); }
  .handover.is-mobile .handover__station.is-active { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__item[open] .faq__a::before { animation: none; }
}
/* ============================================================================
   Two-image swap wiring (Home): graded B/W default, colour on hover.
   The photo files are already graded, so the single-image grayscale filter set
   further up is switched off for these slots and the reveal is done by fading in
   the colour layer on the same hover trigger.
   ========================================================================== */
.hero__media img, .approach__media img { filter: none; }

@keyframes faqBracketDraw { from { transform: scaleY(0); opacity: 0.3; } to { transform: scaleY(1); opacity: 1; } }

/* ============================================================================
   ANSPRECHPARTNER-BLOCK
   Eine .person-Karte rechts neben dem Sektions-Kopf (.sec-head--beside
   .sec-head--top). Die Breite deckelt die Karte, damit das Foto nicht auf
   Plakatgroesse waechst, wenn die rechte Spalte breit wird.
   Ersetzt die frueheren Einzel-Kopien .na-owner und .mdr-owner.
   ========================================================================== */
.owner { max-width: 860px; }


/* ============================================================================
   FAQ auf hellem Grund. Die Basis-Komponente ist fuer das blaue Band gebaut
   (weisse Schrift, helle Trennlinien). Auf weissem Grund braucht sie diese
   Umkehrung. Lag in security.css und war damit fuer jede andere Seite
   unsichtbar: der Fachartikel rendert sonst weisse Schrift auf Weiss.
   ========================================================================== */
.faq--plain .faq__item { border-top-color: var(--c-border); }
.faq--plain .faq__item:last-child { border-bottom-color: var(--c-border); }
.faq--plain .faq__q { color: var(--c-text); }
.faq--plain .faq__a { color: var(--c-text); opacity: 1; }
.faq--plain .faq__icon { color: var(--c-brand-text); }
.faq--plain .faq__bracket { border-color: var(--c-brand-text); }
/* Unter 640px zeichnet nicht die Schiene die Klammer, sondern ein ::before an
   der offenen Antwort. Das braucht denselben Farbwechsel: auf hellem Grund war
   das Lime praktisch unsichtbar, waehrend die Desktop-Klammer daneben blau lief. */
.faq--plain .faq__item[open] .faq__a::before { border-color: var(--c-brand-text); }