/* ============================================================
   Landingpage-Variante "Neu" (Version B: KI-Mitarbeiter-Vision).
   Wird nur auf der Startseite geladen, nach den globalen Styles.
   Abteilungs-Akzente über die drei Tier-Farben der Site:
   collab = Violett, intel = Pink, automate = Cyan.
   ============================================================ */

.t-collab   { --hn-ac: var(--state-collab);   --hn-ac-bg: var(--state-collab-bg);   --hn-ac-br: var(--state-collab-br); }
.t-intel    { --hn-ac: var(--state-intel);    --hn-ac-bg: var(--state-intel-bg);    --hn-ac-br: var(--state-intel-br); }
.t-automate { --hn-ac: var(--state-automate); --hn-ac-bg: var(--state-automate-bg); --hn-ac-br: var(--state-automate-br); }

/* ---------- Hero: Headline ---------- */

/* "KI-Mitarbeiter." bzw. "Eine Plattform." sollen in der Hero-Spalte immer
   in eine Zeile passen: etwas flachere Skalierung als das globale
   clamp(44px, 6.4vw, 76px) aus site.css. */
.hero h1.hn-h1 { font-size: clamp(40px, 4.6vw, 72px); }
/* Vierzeilige Aufzählung (Fusion): „Geschäftsprozesse," ist das längste
   Wort und muss in die Hero-Spalte passen, dafür eine Stufe kleiner. */
.hero h1.hn-h1-list { font-size: clamp(31px, 3.5vw, 55px); line-height: 1.12; }

/* ---------- Hero: rotierendes Stellenprofil ---------- */

.hnh { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }

@keyframes hnh-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hnh-card { display: block; background: var(--paper); border: 1px solid var(--border-1);
  border-top: 3px solid var(--hn-ac); border-radius: 20px; padding: 26px 28px;
  text-decoration: none; color: var(--fg-1);
  box-shadow: 0 30px 70px -34px hsl(262 60% 20% / .55);
  animation: hnh-in .45s cubic-bezier(.2,.7,.3,1) both; }
.hnh-card:hover { border-color: var(--hn-ac); border-top-color: var(--hn-ac); }

.hnh-head { display: flex; align-items: center; gap: 14px; }
.hnh-av { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hn-ac-bg); color: var(--hn-ac); border: 1px solid var(--hn-ac-br); }
.hnh-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 20px; line-height: 1.15; }
.hnh-dept { margin: 3px 0 0; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--hn-ac); }
.hnh-badge { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 100px; background: var(--muted); color: var(--fg-2);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.hnh-task { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--fg-2); }

.hnh-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-1); }
.hnh-lbl { margin: 0 0 10px; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--fg-1); }
.hnh-bpmn { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--hn-ac); border: 1px solid var(--hn-ac-br); background: var(--hn-ac-bg);
  border-radius: 100px; padding: 2px 8px; }
.hnh-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.hnh-chip { font-size: 12px; font-weight: 600; color: var(--fg-2); background: var(--muted);
  border: 1px solid var(--border-1); border-radius: 100px; padding: 4px 11px; white-space: nowrap; }
.hnh-chip.is-more { background: transparent; color: var(--hn-ac); border-color: var(--hn-ac-br); }

.hnh-rows { margin-top: 16px; display: grid; gap: 9px; }
.hnh-rows p { margin: 0; display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.hnh-rows p svg { flex: 0 0 auto; transform: translateY(2px); color: var(--hn-ac); }
.hnh-rows b { color: var(--fg-1); font-weight: 650; }

.hnh-go { margin-top: 18px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--hn-ac); }

.hnh-dots { display: flex; justify-content: center; gap: 8px; }
.hnh-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.32); transition: transform .2s, background .2s; }
.hnh-dots button.is-on { background: #fff; transform: scale(1.35); }

/* ---------- Das Team: Tabs + Rollenkarten ---------- */

.hn-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.hn-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px;
  border-radius: 100px; border: 1px solid var(--border-1); background: var(--paper);
  color: var(--fg-2); font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s; }
.hn-tab:hover { border-color: var(--hn-ac); color: var(--hn-ac); }
.hn-tab.is-on { background: var(--hn-ac-bg); border-color: var(--hn-ac); color: var(--hn-ac); }

.hn-team { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
@media (max-width: 860px) { .hn-team { grid-template-columns: 1fr; } }

.hn-role { display: flex; align-items: flex-start; gap: 16px; padding: 22px 24px;
  border: 1px solid var(--border-1); border-radius: 18px; background: var(--paper);
  text-decoration: none; color: var(--fg-1); transition: border-color .15s, box-shadow .15s, transform .15s; }
.hn-role:hover { border-color: var(--hn-ac); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hn-role-av { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--hn-ac-bg); color: var(--hn-ac); border: 1px solid var(--hn-ac-br); }
.hn-role-body { min-width: 0; flex: 1; }
.hn-role-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 17px; }
.hn-role-task { margin: 5px 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.hn-role-own .hn-role-task { margin-bottom: 0; }
.hn-role-arrow { align-self: center; color: var(--hn-ac); flex: 0 0 auto; }
.hn-role-own { border-style: dashed; }
.hn-role-own:hover { border-style: solid; }

/* ---------- Der Bauplan ---------- */

.hn-bau { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .hn-bau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .hn-bau { grid-template-columns: 1fr; } }

.hn-bau-tile { background: var(--paper); border: 1px solid var(--border-1); border-radius: 18px; padding: 26px 24px; }
.hn-bau-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.hn-bau-num { font-family: var(--font-serif); font-weight: 700; font-size: 15px; color: var(--primary); }
.hn-bau-ic { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--accent); color: var(--primary); }
.hn-bau-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 19px; }
.hn-bau-body { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

.hn-hand { display: flex; align-items: center; gap: 28px; max-width: 900px; margin: 28px auto 0;
  padding: 24px 28px; border: 1px solid var(--border-1); border-radius: 18px; background: var(--paper); }
@media (max-width: 720px) { .hn-hand { flex-direction: column; align-items: flex-start; gap: 18px; } }
.hn-hand-flow { display: flex; align-items: center; flex: 0 0 auto; }
.hn-hand-b, .hn-hand-u { width: 38px; height: 38px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; }
.hn-hand-b { background: var(--accent); color: var(--primary); }
.hn-hand-u { background: var(--muted); color: var(--fg-1); border: 1px solid var(--border-1); }
.hn-hand-line { width: 26px; height: 2px; background: var(--border-2, var(--border-1)); }
.hn-hand-gw { width: 13px; height: 13px; background: var(--paper); border: 2px solid var(--primary);
  transform: rotate(45deg); border-radius: 3px; flex: 0 0 auto; }
.hn-hand-h { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 17px; color: var(--fg-1); }
.hn-hand-p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-2); }

/* ---------- Lösungen ---------- */

.hn-sol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .hn-sol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hn-sol { grid-template-columns: 1fr; } }

.hn-sol-card { position: relative; display: block; padding: 24px 22px; border-radius: 18px;
  border: 1px solid var(--border-1); background: var(--paper); text-decoration: none; color: var(--fg-1);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.hn-sol-card:hover { border-color: var(--hn-ac); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hn-sol-ic { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--hn-ac-bg); color: var(--hn-ac); border: 1px solid var(--hn-ac-br);
  margin-bottom: 16px; }
.hn-sol-title { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 17px; }
.hn-sol-sub { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--fg-2); }
.hn-sol-arrow { position: absolute; top: 24px; right: 20px; color: var(--hn-ac); }

/* ---------- Plattform ---------- */

.hn-plat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1080px) { .hn-plat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .hn-plat { grid-template-columns: 1fr; } }

.hn-plat-card { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 18px;
  border: 1px solid var(--border-1); background: var(--paper); text-decoration: none; color: var(--fg-1);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.hn-plat-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.hn-plat-ic { width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center;
  justify-content: center; background: var(--accent); color: var(--primary); margin-bottom: 16px; }
.hn-plat-title { margin: 0; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-weight: 700; font-size: 18px; }
.hn-plat-abbr { font-family: var(--font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  color: var(--primary); background: var(--accent); border-radius: 100px; padding: 2px 8px; }
.hn-plat-body { margin: 9px 0 18px; font-size: 14px; line-height: 1.55; color: var(--fg-2); flex: 1; }
.hn-plat-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--primary); }

/* ---------- Fusion-Hero, Fassung A: drei Ebenen, ein Modell ---------- */

.hnf-card { background: var(--paper); border: 1px solid var(--border-1); border-radius: 20px;
  padding: 26px 28px; box-shadow: 0 30px 70px -34px hsl(262 60% 20% / .55); }
.hnf-layers { position: relative; display: grid; gap: 14px; }
/* Verbindungslinie zwischen den Ebenen, läuft durch die Icon-Spalte. */
.hnf-layers::before { content: ''; position: absolute; left: 51px; top: 18px; bottom: 18px;
  width: 2px; background: linear-gradient(180deg, #00D4FF 0%, #7729FF 55%, #FF6B9C 100%); opacity: .45; }
.hnf-layer { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--border-1); border-radius: 14px; background: var(--paper); }
.hnf-num { font-family: var(--font-serif); font-weight: 700; font-size: 13px; color: var(--primary); width: 18px; }
.hnf-ic { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; background: var(--accent); color: var(--primary); }
.hnf-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 16.5px; color: var(--fg-1); }
.hnf-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.hnf-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px;
  padding-top: 16px; border-top: 1px solid var(--border-1);
  font-size: 13px; font-weight: 700; color: var(--primary); }

/* ---------- Fusion-Hero, Fassung B "Glas": vier Ebenen auf einem Fundament ----------
   Kein weißes Kartenblatt: das Schaubild liegt IM dunklen Hero.
   Die Ebenen sind getöntes Glas, der Farbverlauf der Marke läuft als
   Rückgrat durch die Icon-Spalte, und die Fundament-Leiste unten trägt
   den Stapel sichtbar. Farben hier bewusst als Literale (wie in
   .hn-ink): die Text-Tokens des Exports gelten für hellen Grund. */

.hng-stack { position: relative; display: grid; gap: 10px; }
/* Lichtschein hinter dem Stapel, hebt ihn vom Hero-Muster ab. */
.hng-glow { position: absolute; inset: -14% -10% -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 46% at 62% 26%, hsl(196 100% 55% / .20) 0%, transparent 70%),
    radial-gradient(ellipse 66% 58% at 38% 78%, hsl(262 90% 58% / .30) 0%, transparent 72%); }

.hng-layers { position: relative; z-index: 1; display: grid; gap: 10px; }
/* Rückgrat: läuft durch die Icon-Spalte, verbindet die vier Ebenen. */
/* left = Mitte der Icon-Spalte: padding 18 + Nummer 18 + gap 14 + 40/2. */
.hng-layers::before { content: ''; position: absolute; left: 70px; top: 26px; bottom: 26px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, #00D4FF 0%, #7729FF 55%, #FF6B9C 100%); opacity: .75; }

.hng-layer { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 100%);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 40px -30px rgba(0,0,0,.9);
  animation: hng-in .5s cubic-bezier(.2,.7,.3,1) both; }
.hng-layer:nth-child(1) { animation-delay: .05s; --hng-ac: #00D4FF; --hng-halo: rgba(0,212,255,.09); }
.hng-layer:nth-child(2) { animation-delay: .14s; --hng-ac: #476DFF; --hng-halo: rgba(71,109,255,.10); }
.hng-layer:nth-child(3) { animation-delay: .23s; --hng-ac: #9839E7; --hng-halo: rgba(152,57,231,.12); }
.hng-layer:nth-child(4) { animation-delay: .32s; --hng-ac: #FF6B9C; --hng-halo: rgba(255,107,156,.10); }

@keyframes hng-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hng-layer { animation: none; } }

.hng-num { font-family: var(--font-serif); font-weight: 700; font-size: 13px;
  width: 18px; color: var(--hng-ac); }
.hng-ic { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; color: var(--hng-ac);
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 4px var(--hng-halo); }
.hng-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 16.5px; color: #fff; }
/* Vollfarbe statt weiß mit Opacity: auf dem Glas war die Schrift sonst
   schwer lesbar (Regel "kein Grau, keine Opacity für Text"). */
.hng-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #E5DEFF; }

/* Fundament: trägt die vier Ebenen, deshalb der Verlauf über die
   ganze Breite und die deutlichere Kante nach oben. */
.hng-base { position: relative; z-index: 1; margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 18px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(90deg, hsl(196 100% 55% / .16) 0%, hsl(262 90% 58% / .22) 52%, hsl(340 100% 71% / .16) 100%),
    rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  font-size: 13.5px; font-weight: 700; color: #fff; }
.hng-base svg { color: #C4B5FD; flex: 0 0 auto; }

@media (max-width: 640px) {
  .hng-layer { padding: 13px 14px; gap: 11px; }
  .hng-layers::before { left: 63px; }
  .hng-base { text-align: center; }
}

/* ---------- Fusion-Hero, Fassung C "Panel": ein Modell, vier Zeilen ----------
   Gegenthese zum Glas: nichts ist durchlässig, das Hero-Muster scheint
   nicht durch, und jede Schrift steht in einer Vollfarbe (kein Grau, keine
   Opacity). Ein Rahmen mit Hairline-Zeilen statt vier schwebender Karten:
   "eine Plattform" wird dadurch auch optisch eine Fläche. */

.hnp-panel { position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid hsl(262 34% 30%);
  background: linear-gradient(165deg, #1D1136 0%, #150B29 100%);
  box-shadow: 0 34px 80px -40px #05000E; }

.hnp-rows { position: relative; padding: 8px 0; }
/* Rückgrat durch die Icon-Spalte: die deckenden Icon-Flächen liegen darauf,
   sichtbar bleibt es zwischen den Zeilen. left = Mitte der Icon-Spalte
   (padding 20 + Nummer 18 + gap 14 + 40/2). Beide Enden laufen transparent
   aus, damit über der ersten und unter der letzten Zeile kein Stummel
   in der Luft hängt. */
.hnp-rows::before { content: ''; position: absolute; left: 72px; top: 18px; bottom: 18px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent 0%, #00D4FF 10%,
    #7729FF 55%, #FF6B9C 90%, transparent 100%); }

.hnp-row { position: relative; display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; }
/* Trenner setzt erst hinter der Icon-Spalte an (20 + 18 + 14 + 40), damit
   das Rückgrat als ungestörte Bahn durchläuft. */
.hnp-row + .hnp-row::before { content: ''; position: absolute; left: 92px; right: 20px; top: 0;
  height: 1px; background: hsl(262 28% 26%); }
.hnp-row:nth-child(1) { --hnp-ac: #22D9FF; }
.hnp-row:nth-child(2) { --hnp-ac: #7C9DFF; }
.hnp-row:nth-child(3) { --hnp-ac: #B57BFF; }
.hnp-row:nth-child(4) { --hnp-ac: #FF8FB6; }

.hnp-num { font-family: var(--font-serif); font-weight: 700; font-size: 13px;
  width: 18px; color: var(--hnp-ac); }
.hnp-ic { position: relative; width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; color: var(--hnp-ac);
  background: #241645; border: 1px solid hsl(262 32% 34%); }
.hnp-name { margin: 0; font-family: var(--font-serif); font-weight: 700; font-size: 16.5px; color: #fff; }
.hnp-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #DDD6FE; }

/* Fundament: trägt die vier Zeilen, sitzt deshalb IM Panel, abgesetzt
   durch eine hellere Kante und einen dunklen Marken-Verlauf. */
.hnp-base { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 20px; border-top: 1px solid hsl(262 32% 32%);
  background: linear-gradient(90deg, #13263C 0%, #241548 52%, #33153A 100%);
  font-size: 13.5px; font-weight: 700; color: #fff; }
.hnp-base svg { color: #C4B5FD; flex: 0 0 auto; }

@media (max-width: 640px) {
  .hnp-row { padding: 14px; gap: 11px; }
  .hnp-row + .hnp-row::before { left: 83px; right: 14px; }
  .hnp-rows::before { left: 63px; }
  .hnp-base { padding: 14px; text-align: center; }
}

/* ---------- Kontrolle & Audit (dunkel) ---------- */

.hn-ink { position: relative; background: var(--hero-ink); color: #fff; padding: 104px 0; overflow: hidden; isolation: isolate; }
.hn-ink-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .14; z-index: 0; }
.hn-ink-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,8,34,.6) 0%, rgba(17,8,34,.78) 100%); z-index: 0; }
.hn-ink-inner { position: relative; z-index: 1; text-align: center; }
.hn-ink-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #C4B5FD; }
.hn-ink-h { margin: 16px 0 0; font-family: var(--font-serif); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(30px, 3.6vw, 44px); color: #fff; }
.hn-ink-lead { margin: 18px auto 0; max-width: 680px; font-size: 17px; line-height: 1.6; color: #EDE9FE; }
.hn-ink-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 32px; max-width: 1040px;
  margin: 52px auto 0; text-align: left; }
@media (max-width: 1000px) { .hn-ink-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .hn-ink-list { grid-template-columns: 1fr; } }
/* Reveal-Sektion (Fusion): vier Punkte → 2×2 statt 3+1. */
.hn-ink-list.is-four { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
@media (max-width: 640px) { .hn-ink-list.is-four { grid-template-columns: 1fr; } }
.hn-ink-item { display: flex; gap: 13px; align-items: flex-start; }
.hn-ink-ic { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(196,181,253,.18); color: #C4B5FD;
  border: 1px solid rgba(196,181,253,.35); }
.hn-ink-name { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.hn-ink-body { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: #DDD6FE; }
.hn-ink-cta { margin-top: 48px; }

/* Varianten-Switcher: Styles liegen global in assets/variant-switch.css. */

/* Kurzfassung der Hero-Headline (zwei Zeilen, Standard seit 2026-09).
   Zwischen den beiden anderen Groessen: gross genug, um zu tragen, aber
   nicht so wuchtig wie die zweizeilige Fassung mit 72px. Der gewonnene
   Platz geht in die Abstaende darueber und darunter, damit der Hero
   denselben Rhythmus behaelt wie die vierzeilige Aufzaehlung. */
.hero h1.hn-h1-kurz { font-size: clamp(34px, 3.7vw, 56px); line-height: 1.06;
  margin-top: 56px; margin-bottom: 52px; }