/* carelee – Startseite (index.html), nur seitenspezifische Teile. Basis: assets/site.css.
   Pfade in url() sind relativ zu dieser Datei (assets/). */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  max-width: var(--block-max);
  margin-inline: auto;
  /* Höhe nahe am Seitenverhältnis des Fotos (2,36:1), damit es wenig beschnitten wird */
  min-height: clamp(540px, calc(min(100vw - 2 * var(--gutter), var(--block-max)) / 2.3), 760px);
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 6vw, 5rem);
  /* Rundung per clip-path statt border-radius + overflow: so wird alles in einem Schritt
     beschnitten, und der dunkle Grund blitzt an den Kanten des Fotos nicht als feine Linie durch */
  clip-path: inset(0 round var(--block-radius));
  --o: var(--bg);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--o) 94%, transparent) 0%, color-mix(in srgb, var(--o) 82%, transparent) 26%, color-mix(in srgb, var(--o) 52%, transparent) 42%, color-mix(in srgb, var(--o) 18%, transparent) 54%, transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--o) 10%, transparent) 0%, transparent 46%, color-mix(in srgb, var(--o) 22%, transparent) 100%),
    url("carelee-hero.webp?v=7") center / cover no-repeat,
    var(--o);
}

/* Titel auf zwei Zeilen (Desktop): Foto links ausrichten, damit die Person neben dem Text steht.
   Die Zeilen zählt das Skript am Ende der Seite (Klasse is-claim-2). */
.hero.is-claim-2 {
  background-position: 0 0, 0 0, left center, 0 0;
}

.hero-grid {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.hero-copy {
  max-width: min(46rem, 50%);
}

@media (max-width: 760px) {
  .hero-copy {
    max-width: 46rem;
  }
}

.claim {
  text-wrap: balance;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -.01em;
  margin-bottom: 1.2rem;
}

/* Ausnahme: weicher Textschatten nur für den Hero (Lesbarkeit auf dem Foto) */
.hero {
  text-shadow: 0 2px 28px color-mix(in srgb, var(--on-colour) 60%, transparent);
}

.hero-sub {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 44ch;
  margin-bottom: 1.9rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.hero-photo {
  display: none;
}

/* Mobile: Foto oben, läuft nach unten lang in die Hero-Fläche aus; der Titel liegt über dem Auslauf */
@media (max-width: 760px) {
  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 0 2.6rem;
    background: var(--on-colour);
  }

  .hero-photo {
    order: -1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 34%, rgba(0, 0, 0, .82) 52%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .14) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 34%, rgba(0, 0, 0, .82) 52%, rgba(0, 0, 0, .45) 70%, rgba(0, 0, 0, .14) 86%, transparent 100%);
  }

  .hero-grid {
    position: relative;
    margin-top: clamp(-11rem, -30vw, -5rem);
  }

  .hero .claim {
    margin-top: 2.4rem;
  }
}

/* Schmale Handys: höheres Bildformat, damit über dem Titel genug Foto bleibt */
@media (max-width: 520px) {
  .hero-photo {
    aspect-ratio: 4 / 3;
    object-position: 50% 20%;
  }
}

/* ---------- Was ist carelee / Vor carelee ---------- */
.was-lead {
  max-width: 64ch;
}


/* ---------- Video ----------
   Text oben, Video darunter, direkt auf dem Seitengrau (Section ohne Box).
   Breite: Die Box im Video (80 px Rand bei 1920 bzw. 1080 px) schliesst mit der Textspalte ab,
   also Textbreite × 1920/1760 (quer) bzw. × 1080/920 (hoch). Textbreite = Section-Breite (100cqw),
   höchstens --maxw, minus --edge auf beiden Seiten (wie .wrap).
   Begrenzt durch die Fensterbreite und die Höhe: Das ganze Video passt immer unter den Header
   ins Fenster (wie das Demo-Telefon). */
.vid-sec {
  --vid-max-h: calc(100vh - var(--bar-h) - 2rem);
  container-type: inline-size;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.5rem, 2vw, 1.25rem);
  padding-block: clamp(1.5rem, 4vw, 3rem) 0;
}

@supports (height: 100svh) {
  .vid-sec {
    --vid-max-h: calc(100svh - var(--bar-h) - 2rem);
  }
}

.vid-sec>.wrap {
  align-self: stretch;
}

.vid-copy {
  max-width: 52ch;
}

/* --vid-text-w hier statt an .vid-sec: cqw bezieht sich auf den Container über dem Element */
.vid-fig {
  --vid-text-w: calc(min(100cqw, var(--maxw)) - 2 * var(--edge));
  position: relative;
  flex: none;
  margin: 0;
  width: min(var(--vid-text-w) * 1080 / 920, 100vw, var(--vid-max-h) * 9 / 16);
  cursor: pointer;
}

.vid-sec.is-quer .vid-fig {
  width: min(var(--vid-text-w) * 1920 / 1760, 100vw, var(--vid-max-h) * 16 / 9);
}

/* Kein Rahmen: Der Videogrund (#f4f3f6) ist fast gleich wie die Seite. Die Ränder blenden kurz aus,
   damit Elemente und Schatten am Videorand nicht hart abbrechen. */
.vid {
  --vid-fade: clamp(6px, 1.1vw, 16px);
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--vid-fade), #000 calc(100% - var(--vid-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--vid-fade), #000 calc(100% - var(--vid-fade)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--vid-fade), #000 calc(100% - var(--vid-fade)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--vid-fade), #000 calc(100% - var(--vid-fade)), transparent);
  mask-composite: intersect;
}

.vid-sec.is-quer .vid {
  aspect-ratio: 16 / 9;
}

/* Play-Knopf nur, solange das Video pausiert ist (und bei Tastaturfokus). Pausieren: Klick aufs Video.
   Sitzt in der Ecke der Box im Video (Box-Rand hoch: 7,4 % der Breite, 4,2 % der Höhe; quer: 4,2 % der Breite, 8,7 % der Höhe). */
.vid-toggle {
  position: absolute;
  right: calc(7.4% + 12px);
  bottom: calc(4.2% + 12px);
  opacity: 0;
  transition: opacity var(--dur) ease;
}

.vid-sec.is-quer .vid-toggle {
  right: calc(4.5% + 14px);
  bottom: calc(8.5% + 8px);
}

.vid-fig.is-paused .vid-toggle,
.vid-toggle:focus-visible {
  opacity: 1;
}

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

/* ---------- Badge (Mitarbeiterkarte) ---------- */
#mitarbeiterkarte {
  background: linear-gradient(to right, var(--card), var(--bg));
}

.badge-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}

@media (max-width: 840px) {
  .badge-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  /* Karte steht hier unter dem Text: Verlauf von oben nach unten statt von links nach rechts */
  #mitarbeiterkarte {
    background: linear-gradient(to bottom, var(--card), var(--bg));
  }
}

.badge-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 1.5rem;
}

/* Scan-Puls: ein Ring pro Hover, geht vom NFC-Symbol oben rechts aus und läuft
   nach dem Verlassen fertig. Die Section beschneidet ihn. */
/* Ursprung: NFC-Symbol oben rechts auf der Karte; liegt hinter der Kartenfläche */
.scan {
  position: absolute;
  right: 37px;
  top: 33px;
  width: 320px;
  aspect-ratio: 1;
  translate: 50% -50%;
  pointer-events: none;
  z-index: -1;
}

.scan i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(transparent, var(--green-soft) 90%);
  opacity: 0;
}

.scan.is-scanning i {
  animation: scan-pulse 1.8s ease-out 1;
}

@keyframes scan-pulse {
  0% {
    transform: scale(.05);
    opacity: .55;
  }

  45% {
    opacity: .18;
  }

  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

/* Shadow erlaubt (3D-Objekt): das Badge.
Bild statt Grafik: .badge-face durch <img class="badge-face" …> ersetzen. */
.badge-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1.585 / 1;
  /* Rundung wie eine echte Karte (ID-1) und wie in carelee-karte.svg: 3,5 % der Breite */
  border-radius: 3.5% / 5.56%;
  /* feine Kontur wie die übrigen dunklen Flächen */
  outline: 1px solid var(--line);
  box-shadow: 0 34px 70px -22px var(--bg);
  transform: perspective(1000px) rotateX(3deg) rotateY(-6deg);
  will-change: transform;
}

.badge-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  object-fit: cover;
}

/* Glanz: weich, elliptisch, nicht reinweiss */
.badge-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 58% 42% at var(--mx, 30%) var(--my, 20%), color-mix(in srgb, var(--text-main) 30%, transparent), color-mix(in srgb, var(--text-main) 8%, transparent) 50%, transparent 75%);
  mix-blend-mode: screen;
  opacity: var(--glare, .7);
}


@media (prefers-reduced-motion: reduce) {
  .scan {
    display: none;
  }
}

/* ---------- Live ausprobieren: generisches Telefon, einmaliger 3D-Fly-in ---------- */
/* Zitat-Blase (Stil .quote aus site.css), nur Abstand und Breite hier */
.demo-note {
  margin-top: 1.6rem;
  max-width: 40ch;
}

.phone-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  perspective: 1400px;
  perspective-origin: 50% 20%;
}

/* data-theme="dark" am Telefon: Rahmen = --card (indigo), Kante = --bg.
   Ausnahme der Shadow-Regel: das Telefon ist (wie das Badge) ein 3D-Objekt. */
/* Höhe nie grösser als das Fenster minus Header und die beiden Fades (je 28px);
   die Breite folgt über das Seitenverhältnis */
/* Rundung und Rahmen wachsen mit dem Telefon (wie bei der Karte): Rundung 13 %, Rahmen 2,4 % der Breite */
.phone {
  --phone-max-h: calc(100vh - var(--bar-h) - 56px);
  --phone-w: min(clamp(258px, 78vw, 296px), calc(var(--phone-max-h) * 9 / 19.2));
  --phone-bezel: calc(var(--phone-w) * .024);
  --phone-radius: calc(var(--phone-w) * .13);
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19.2;
  padding: var(--phone-bezel);
  border-radius: var(--phone-radius);
  /* Rahmen in der dunkleren Fläche */
  background: var(--bg);
  transform-style: preserve-3d;
  box-shadow: 0 44px 80px -40px color-mix(in srgb, var(--on-colour) 60%, transparent);
}

/* nach .phone, sonst überschreibt dessen vh-Wert diesen */
@supports (height: 100dvh) {
  .phone {
    --phone-max-h: calc(100dvh - var(--bar-h) - 56px);
  }
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg);
  transform: translateZ(-7px);
}

.phone::after {
  transform: translateZ(-14px);
}

.phone .screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-radius) - var(--phone-bezel));
  /* parallel zum Rahmen */
  overflow: hidden;
  background: var(--text-main);
  transform: translateZ(1px);
}

/* Vor dem Einfliegen unsichtbar (Deckkraft am Container – am 3D-Element
   würde sie den 3D-Kontext abflachen) */
.js .phone-stage:not(.in) {
  opacity: 0;
}

.phone-stage.in {
  animation: phone-fade .7s ease both;
}

.phone-stage.in .phone {
  animation: phone-fly 2s cubic-bezier(.22, .7, .25, 1) both;
}

@keyframes phone-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes phone-fly {
  0% {
    transform: translate3d(0, 200px, -320px) rotateX(64deg) rotateY(0deg) rotateZ(-26deg) scale(.8);
  }

  55% {
    transform: translate3d(0, -8px, 0) rotateX(-6deg) rotateY(-18deg) rotateZ(2deg) scale(1.02);
  }

  100% {
    transform: none;
  }
}

/* Angekommen: 3D-Kontext auflösen, damit das iframe scharf gerendert wird */
.phone-stage.is-flat {
  animation: none;
  opacity: 1;
}

.phone-stage.is-flat .phone {
  transform-style: flat;
  animation: none;
  transform: none;
}

.phone-stage.is-flat .phone::before,
.phone-stage.is-flat .phone::after {
  display: none;
}

.phone-stage.is-flat .phone .screen {
  transform: none;
}

.phone-app {
  position: absolute;
  top: 0;
  left: 0;
  width: 390px;
  height: 844px;
  border: 0;
  transform-origin: top left;
}

.js .phone-stage:not(.is-flat) .phone-app {
  pointer-events: none;
}

/* Leiste über dem Telefon: Live-Chip und runder Neustart-Button, gleich hoch */
.demo-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* rund und genau so hoch wie der Chip (.tag: Schrift sm × 1.25 + Padding .84rem + Rand 2px) */
.demo-reset {
  --chip-h: calc(var(--fs-sm) * 1.25 + .84rem + 2px);
  width: var(--chip-h);
  height: var(--chip-h);
  min-height: 0;
  padding: 0;
}

.demo-reset .ic {
  width: 18px;
  height: 18px;
}

/* Neustart (nur das Telefon bewegt sich; Chip und Button bleiben stehen):
   1. kurz hinausfliegen, 2. unsichtbar neu laden, 3. erst wenn die App steht wieder einfliegen */
.phone-stage.is-out,
.phone-stage.is-wait,
.phone-stage.is-replay {
  animation: none;
  opacity: 1;
}

/* flach, damit das Ausblenden den Bildschirm nicht verschluckt (Deckkraft flacht 3D ohnehin ab) */
.phone-stage.is-out .phone {
  transform-style: flat;
  animation: phone-out .42s cubic-bezier(.55, 0, .8, .2) both;
}

.phone-stage.is-out .phone::before,
.phone-stage.is-out .phone::after {
  display: none;
}

.phone-stage.is-out .phone .screen {
  transform: none;
}

.phone-stage.is-wait .phone {
  animation: none;
  visibility: hidden;
}

.phone-stage.is-replay .phone {
  animation: phone-fly 1.3s cubic-bezier(.22, .7, .25, 1) both;
}

@keyframes phone-out {
  from {
    transform: none;
    opacity: 1;
  }

  to {
    transform: translate3d(0, 160px, -280px) rotateX(55deg) rotateZ(-18deg) scale(.82);
    opacity: 0;
  }
}

/* Live-Chip über dem Telefon (gestaltet wie die Integrationen); der Puls bleibt im Chip */
.live-chip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  font-weight: var(--fw-medium);
}

@media (max-width: 840px) {
  .phone-stage {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  .phone-stage.in,
  .phone-stage.in .phone {
    animation: none;
  }
}

/* ---------- Lee ---------- */
.lee-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 820px) {
  .lee-grid {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.lee-sec h2 {
  max-width: 18ch;
  margin-bottom: 1.2rem;
}

.lee-sec .lee-copy p {
  max-width: 52ch;
}

.lee-sec .lee-copy p+p {
  margin-top: 1rem;
}

.lee-facts {
  list-style: none;
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.lee-facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-base);
}

.lee-facts .ic {
  color: var(--green-soft);
  margin-top: .15rem;
}

/* Subtiler Lichthof hinter der Lee-Box */
.lee-visual {
  position: relative;
  isolation: isolate;
}

.lee-visual::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--lilac-soft) 22%, transparent), transparent);
}

/* Dunkle Section = Kartenfarbe, Box darin = Hintergrundfarbe */
.lee-card {
  width: 100%;
  max-width: 380px;
  margin-inline: auto;
  padding: 22px;
  padding-bottom: 0;
  border-radius: var(--block-radius);
  background: var(--bg);
}

.lee-card-head {
  text-align: center;
  margin-bottom: 16px;
}

.lee-card-head b {
  display: block;
  font-size: var(--fs-h3);
  line-height: 1.1;
  font-weight: var(--fw-medium);
}

.lee-card-head span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-sm);
  line-height: 1.3;
}

/* Nachrichten wachsen von unten nach oben und verschwinden oben in einer Fade */
.chat-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  height: 280px;
  overflow: hidden;
  padding-bottom: 22px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 36px);
}

.chat-body .bubble {
  animation: msgin .38s ease both;
}

/* Anruf-Vorschlag unter Lees Antwort: Outline-Chip mit Telefon-Icon */
.chat-body .chat-call {
  display: flex;
  width: fit-content;
  margin-top: .65rem;
  /* Farbe der Lee-Blase übernehmen (die Section ist dunkel, die Blase hell) */
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
}

@keyframes msgin {
  from {
    opacity: 0;
    transform: translateY(9px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .chat-body .bubble {
    animation: none;
  }
}

/* ---------- Zielgruppen ---------- */
.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}

@media (max-width: 820px) {
  .aud-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

.aud-card {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  padding: 1.7rem 1.55rem 1.85rem;
  border-radius: var(--radius-l);
}

.aud-card--a {
  background: var(--green-soft);
  color: var(--on-colour);
}

.aud-card--b {
  background: var(--lilac-soft);
  color: var(--on-colour);
}

.aud-card--c {
  background: var(--card);
}

.aud-head {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}

.aud-card .ic {
  width: 34px;
  height: 34px;
}

.aud-card h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  letter-spacing: -.03em;
  line-height: 1.05;
}

.aud-card p {
  font-size: var(--fs-base);
  line-height: 1.55;
  max-width: 38ch;
  color: inherit;
}

/* ---------- Entscheider ---------- */
.mod-layout {
  display: grid;
  grid-template-columns: minmax(0, 62ch) minmax(220px, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.mod-fig {
  margin: 0;
  justify-self: center;
}

.mod-fig img {
  width: min(460px, 100%);
  height: auto;
}

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

@media (max-width: 820px) {

  .mod-layout,
  .decider-plan {
    grid-template-columns: 1fr;
  }

  /* Illustration unter dem Text: zentriert, max. 400 px */
  .mod-fig img {
    display: block;
    width: min(400px, 100%);
    margin-inline: auto;
  }
}

.dstep {
  padding: 24px 22px;
  border-radius: var(--radius-l);
  background: var(--bg);
}

.dstep .n {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1;
  margin-bottom: .9rem;
  font-variant-numeric: tabular-nums;
  color: var(--green-soft);
}

.dstep h3 {
  margin-bottom: .5rem;
}

.dstep p {
  font-size: var(--fs-base);
}

.proof {
  max-width: 72ch;
  margin-top: 2.4rem;
}

.proof h3 {
  margin-bottom: .5rem;
}

.proof p {
  font-size: var(--fs-base);
}

/* ---------- Vertrauen ---------- */
.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 3.2rem);
  margin-top: 2.6rem;
  align-items: start;
}

@media (max-width: 840px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* zwei Blöcke nebeneinander (vorerst ohne Bild), schmal untereinander */
.trust-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.6rem clamp(1.6rem, 4vw, 3.2rem);
}

.trust-block h3 {
  margin-bottom: .5rem;
}

.trust-block p {
  font-size: var(--fs-base);
}

.trust-block p+p {
  margin-top: .8rem;
}

.trust-block .integrations {
  margin-top: .7rem;
}

/* ---------- Datenschutz ---------- */
.ds-layout {
  display: grid;
  grid-template-columns: minmax(0, 62ch) minmax(220px, 1fr);
  gap: clamp(2.4rem, 6vw, 5.5rem);
  align-items: center;
  margin-top: 2rem;
}

.ds-copy {
  max-width: 62ch;
  font-size: var(--fs-md);
  line-height: 1.7;
}

.ds-copy p+p {
  margin-top: 1rem;
}

.ds-fig {
  margin: 0;
  justify-self: center;
}

.ds-fig img {
  display: block;
  width: min(280px, 70vw);
  height: auto;
}

@media (max-width: 760px) {
  .ds-layout {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .ds-fig {
    justify-self: center;
  }

  /* Querformat unter dem Text: zentriert, max. 400 px */
  .ds-fig img {
    width: min(400px, 100%);
    margin-inline: auto;
  }
}


/* ---------- News ---------- */
.news-all {
  margin-top: 1.6rem;
}

/* ---------- Innovation Hub ---------- */
.hub {
  background: var(--green-soft);
  color: var(--on-colour);
}

.hub h2 {
  max-width: 16em;
}

.hub p {
  max-width: 62ch;
}

.hub .btn {
  margin-top: 1.4rem;
}

/* ---------- Final-CTA ---------- */
.final {
  background: var(--card);
}

.final-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 3vw, 2.8rem);
}

.final .claim {
  flex: 1 1 16rem;
  margin: 0;
  font-size: var(--fs-h2);
  line-height: 1.12;
  font-weight: var(--fw-regular);
}

.final .claim .sub {
  color: var(--green-soft);
}

.final-form {
  flex: 1 1 340px;
  max-width: 460px;
}

.final-form label {
  display: block;
  font-size: var(--fs-sm);
  margin-bottom: .55rem;
}