/* KIA Produktseite
   Farben nur aus dem KIA-App-Design: Dunkelgrün, Salbei, Weiß, KIA Nacht, Koralle (nur im Logo).
   Aufhellungen sind Abstufungen dieser Farben. */

:root {
  --gruen: #1E4636;
  --salbei: #9FC1B1;
  --weiss: #FFFFFF;
  --schwarz: #0F1D17;                   /* KIA Nacht: Textfarbe, ersetzt Schwarz */
  --koralle: #FF6B57;

  --salbei-zart: #EDF3F0;               /* Salbei 20 % auf Weiß */
  --salbei-hell: #D9E6E0;               /* Salbei 40 % auf Weiß */
  --text-2: rgba(15, 29, 23, 0.70);
  --linie: rgba(30, 70, 54, 0.18);
  --auf-gruen: rgba(255, 255, 255, 0.82);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--schwarz);
  background: var(--weiss);
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 850; letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); font-weight: 800; text-transform: uppercase; margin-top: 10px; }
h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
p { margin: 0; max-width: 65ch; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--salbei); outline-offset: 2px; }
.eyebrow { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }

/* ===== Buttons (wie in der App: Salbei mit schwarzer Schrift) ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-size: .98rem;
  padding: 12px 22px; border-radius: 12px; border: 1.5px solid var(--salbei);
  background: var(--salbei); color: var(--schwarz); text-decoration: none; cursor: pointer;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn:hover { background: var(--salbei-hell); border-color: var(--salbei-hell); transform: translateY(-1px); }
.btn-sm { padding: 8px 16px; font-size: .9rem; }
.btn-ghost { background: transparent; color: var(--weiss); border-color: var(--salbei); }
.btn-ghost:hover { background: rgba(159, 193, 177, 0.16); border-color: var(--salbei); }
.btn-ghost-dark { background: transparent; color: var(--gruen); border-color: var(--gruen); }
.btn-ghost-dark:hover { background: var(--salbei-zart); border-color: var(--gruen); }
.btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* ===== Wissensnetz (Animation, Dateien in kia-netz/) ===== */
body { overflow-x: clip; }
.hero { position: relative; overflow: hidden; }
.hero .hero-net {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 40%, #000 70%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 40%, #000 70%);
}
.hero .hero-in { position: relative; z-index: 1; }
.netz-band { margin: 36px calc(50% - 50vw) 0; position: relative; }
main section#wissensnetz { padding-bottom: 0; }
.netz-note { position: absolute; z-index: 3; left: max(24px, calc(50vw - 536px)); bottom: clamp(16px, 3vw, 32px); max-width: 38ch; font-size: .82rem; color: rgba(255, 255, 255, .62); pointer-events: none; }
.netz-canvas { height: min(78vh, 720px); min-height: 540px; }
#wissensnetz h2 em { font-style: normal; color: var(--koralle); }
/* Ab hier informativ: Anwendungen auf hellem Salbei, weiße eckige Kacheln */
main section#anwendungen { background: var(--salbei-zart); box-shadow: 0 0 0 100vmax var(--salbei-zart); clip-path: inset(0 -100vmax); border-top: 0; }
@media (max-width: 900px) {
  .hero .hero-net { opacity: .35; -webkit-mask-image: none; mask-image: none; }
  .netz-canvas { height: 640px; min-height: 0; }
  .netz-note { display: none; }
}

/* ===== Kopfzeile ===== */
.top {
  position: sticky; top: 0; z-index: 50;
  background: var(--gruen); color: var(--weiss);
  border-bottom: 1px solid rgba(159, 193, 177, 0.25);
}
.top-in { display: flex; align-items: center; gap: 20px; min-height: 72px; }
.back { font-size: .85rem; color: var(--salbei); text-decoration: none; white-space: nowrap; }
.back:hover { color: var(--weiss); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--weiss); }
.brand-logo { width: 34px; height: 34px; display: block; flex: none; }   /* KIA-Symbol in weißer Kachel; Größe wie im RNP-Header: Kachel ca. 1,7 × Versalhöhe */
.brand-logo img { width: 100%; height: 100%; display: block; }
.brand-name { font-weight: 850; font-size: 1.75rem; line-height: 1; letter-spacing: .02em; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: .9rem; margin-left: auto; }
.nav a { color: var(--auf-gruen); text-decoration: none; }
.nav a:hover { color: var(--salbei); }

/* ===== Hero ===== */
.hero { background: var(--gruen); color: var(--weiss); padding: 56px 0 72px; }
.hero-in { display: grid; grid-template-columns: 1.2fr .9fr; gap: 48px; align-items: center; }
.hero .eyebrow { color: var(--salbei); }
.hero h1 { margin-top: 14px; }
.hero h1 em { font-style: normal; color: var(--koralle); }
.hero .lead { font-size: 1.12rem; margin-top: 22px; color: var(--auf-gruen); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.plate { background: var(--weiss); color: var(--schwarz); border-radius: 16px; padding: 22px; box-shadow: 8px 8px 0 var(--salbei); display: grid; }
.fl-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; position: relative; padding-bottom: 22px; }
.fl-step:last-child { padding-bottom: 0; }
.fl-step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 48px; bottom: 6px; width: 2px; background: var(--salbei-hell); }
.fl-n { width: 44px; height: 44px; border-radius: 50%; background: var(--gruen); color: var(--weiss); display: grid; place-items: center; font-weight: 850; font-size: 1.35rem; }
.fl-body { display: grid; gap: 10px; min-width: 0; align-content: start; }
.fl-h { font-weight: 800; font-size: 1.2rem; text-transform: uppercase; padding-top: 10px; }
.fl-video { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 2.1 / 1; background: var(--schwarz); }
.fl-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fl-rec, .fl-mic { position: absolute; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 12px; background: rgba(15, 29, 23, .65); color: var(--weiss); font-size: .72rem; }
.fl-rec { left: 10px; top: 10px; font-family: var(--mono); }
.fl-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--koralle); }
.fl-mic { right: 10px; bottom: 10px; }
.fl-mic svg { width: 13px; height: 13px; fill: none; stroke: var(--weiss); stroke-width: 2; stroke-linecap: round; }
.fl-q { font-size: 1rem; font-weight: 500; line-height: 1.35; }
.fl-q span { display: block; font-weight: 400; font-size: .78rem; color: var(--text-2); margin-top: 2px; }
.fl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fl-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--salbei-zart); border-radius: 8px; font-size: .95rem; }
.fl-list li em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .74rem; color: var(--text-2); }
.fl-list li.more { background: none; padding: 0 10px; color: var(--text-2); letter-spacing: .2em; line-height: .8; }
.fl-pl { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--gruen); display: grid; place-items: center; }
.fl-pl svg { width: 11px; height: 11px; fill: var(--weiss); margin-left: 1px; }
.fl-find { grid-template-columns: 1fr auto; align-items: center; }
.fl-s { font-size: .9rem; color: var(--text-2); margin-top: 6px; }
.qr { width: 64px; height: 64px; flex: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; padding: 3px; background: var(--weiss); border: 1px solid var(--schwarz); }
.qr i { background: var(--schwarz); }
.qr i.o { background: var(--weiss); }
@media (prefers-reduced-motion: no-preference) {
  .plate > .fl-step { opacity: 0; transform: translateY(10px); animation: flIn .55s ease-out forwards; }
  .plate > :nth-child(1) { animation-delay: .2s; }
  .plate > :nth-child(2) { animation-delay: .9s; }
  .plate > :nth-child(3) { animation-delay: 1.6s; }
  .fl-rec i { animation: flBlink 1.2s steps(2, start) infinite; }
  @keyframes flIn { to { opacity: 1; transform: none; } }
  @keyframes flBlink { to { visibility: hidden; } }
}

/* ===== Abschnitte ===== */
main section { padding: 64px 0; border-top: 1px solid var(--linie); }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 32px; }
.sec-head p { color: var(--text-2); }
.sec-head > div, .hero-in > div { min-width: 0; }

/* Angebot */
.offer { display: grid; grid-template-columns: .85fr 1.15fr; border-radius: 16px; overflow: hidden; background: var(--weiss); margin: -36px 0 64px; position: relative; box-shadow: 0 18px 40px rgba(15, 29, 23, 0.12); border: 1px solid var(--linie); }
.offer .ol { background: var(--schwarz); color: var(--weiss); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.offer .ol .eyebrow { color: var(--salbei); }
.offer .op { font-weight: 850; font-size: clamp(2.6rem, 6vw, 4rem); line-height: .95; text-transform: uppercase; }
.offer .claim2 { font-weight: 800; font-size: clamp(1.3rem, 2.8vw, 1.8rem); text-transform: uppercase; line-height: 1.1; color: var(--salbei); }
.offer .or { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.incl li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.incl li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* Einblick */
.stage { display: grid; grid-template-columns: 1.45fr 1fr; align-items: end; gap: 0 32px; background: linear-gradient(180deg, var(--salbei-hell), var(--salbei-zart)); border-radius: 16px; overflow: hidden; padding: 0 36px; margin-bottom: 18px; }
.stage-img { min-width: 0; }
.stage-img img { display: block; width: 100%; height: auto; }
.stage-txt { align-self: center; padding-block: 32px; display: grid; gap: 12px; }
.stage-txt h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); font-weight: 800; text-transform: uppercase; line-height: 1.08; }
.stage-txt p { color: var(--text-2); }
.stage.rev { grid-template-columns: 1fr 1.45fr; }
.stage.rev .stage-img { order: 2; margin-right: -36px; }
.demo-note { margin-top: 12px; font-size: .82rem; color: var(--text-2); }

/* Status */
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gruen); margin-right: 7px; vertical-align: 0; flex: none; }
.sdot.part { background: var(--salbei); box-shadow: inset 0 0 0 2px var(--gruen); }
.sdot.plan { background: transparent; box-shadow: inset 0 0 0 2px rgba(15, 29, 23, .45); }

/* Preismodell */
.promises { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--linie); border-radius: 6px; overflow: hidden; }
.promise { padding: 20px; border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.promise:nth-child(3n) { border-right: 0; }
.promise:nth-last-child(-n+3) { border-bottom: 0; }
.promise h3 { font-size: 1.02rem; margin-bottom: 6px; }
.promise p { font-size: .9rem; color: var(--text-2); }

/* Module */
.stbadge { align-self: flex-start; display: inline-flex; align-items: center; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--linie); background: var(--weiss); white-space: nowrap; }

.small-note { margin-top: 14px; font-size: .88rem; color: var(--text-2); max-width: none; }

/* Anwendungen */
.group-h { display: flex; align-items: center; gap: 12px; margin: 8px 0 16px; flex-wrap: wrap; }
.group-h + .map, .group-h + .modules { margin-bottom: 40px; }
.group-h h3 { font-size: 1.3rem; text-transform: uppercase; }
.gh-note { font-size: .9rem; color: var(--text-2); }
.chip { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 4px; white-space: nowrap; }
.chip.K { background: var(--gruen); color: var(--weiss); }
.chip.M { background: var(--salbei); color: var(--schwarz); }
.map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.map.mods { grid-template-columns: repeat(3, 1fr); }
/* Core- und Modul-Kacheln einheitlich, eckig wie in der Anwendungslandkarte */
.field, .mod { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.field h3, .mod .mname { font-size: 1.12rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.field .q { font-size: .9rem; color: var(--text-2); font-style: italic; }
.field ul { margin: 0; padding-left: 18px; font-size: .9rem; display: grid; gap: 3px; }
/* Anwendungslandkarte: Filter, Entwicklungsstand je Punkt, Modul-Etiketten */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.fbtn { font: inherit; font-size: .88rem; border: 1px solid var(--linie); background: var(--weiss); color: var(--schwarz); border-radius: 999px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.fbtn[aria-pressed="true"] { background: var(--gruen); color: var(--weiss); border-color: var(--gruen); }
.fbtn[aria-pressed="true"] .chip.K { background: var(--weiss); color: var(--gruen); }
.legend { display: flex; gap: 10px; align-items: baseline; font-size: .88rem; color: var(--text-2); margin: -8px 0 18px; max-width: none; }
.legend .dot { flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--salbei); transform: translateY(1px); }
.stlegend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 12px 16px; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); font-size: .88rem; margin: 0 0 8px; }
.stlegend strong { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); font-weight: 500; }
.stlegend span { display: inline-flex; align-items: center; }
.field { transition: opacity .2s; }
.field.dim, .field li.dim { opacity: .28; }
.field li { list-style: none; position: relative; }
.field li::before { content: ""; position: absolute; left: -16px; top: .5em; width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); box-sizing: border-box; }
.field li.st-part::before { background: var(--salbei); box-shadow: inset 0 0 0 2px var(--gruen); }
.field li.st-plan::before { background: transparent; box-shadow: inset 0 0 0 2px rgba(15, 29, 23, .45); }
.field li.st-plan { color: var(--text-2); }
.field .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.chip.V { border: 1.5px dashed rgba(15, 29, 23, .55); color: var(--text-2); padding: 2px 8px; }
.chip.M.named { text-transform: none; letter-spacing: .02em; }
.btag { font-family: var(--mono); font-size: .66rem; letter-spacing: .02em; background: var(--salbei); color: var(--schwarz); border-radius: 3px; padding: 0 5px; white-space: nowrap; vertical-align: 1px; }
.modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mod-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.mod .sub { font-family: var(--mono); font-size: .74rem; color: var(--gruen); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mod p { font-size: .9rem; color: var(--text-2); }
.mod .flow { margin-top: auto; font-family: var(--mono); font-size: .74rem; background: var(--salbei-zart); border-radius: 4px; padding: 8px 10px; line-height: 1.5; }

/* Pflege und Betrieb */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choice { display: grid; gap: 12px; align-content: start; }
.opt { background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px; padding: 20px; display: grid; gap: 8px; }
.opt.hl { border: 2px solid var(--gruen); }
.opt .hn { font-weight: 850; font-size: 1.2rem; text-transform: uppercase; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opt p { font-size: .92rem; color: var(--text-2); max-width: none; }
.opt .btn { justify-self: start; margin-top: 4px; }
.opt .stbadge { font-weight: 400; }

/* Pilot */
.pilot { display: grid; grid-template-columns: .8fr 1.2fr; border-radius: 6px; overflow: hidden; border: 1px solid var(--linie); }
.pilot-l { background: var(--gruen); color: var(--weiss); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pilot-l .eyebrow { color: var(--salbei); }
.pilot-l .op { font-weight: 850; font-size: clamp(2.6rem, 6vw, 4rem); line-height: .95; text-transform: uppercase; }
.pilot-l p { color: var(--auf-gruen); }
.pilot-l .btn { align-self: flex-start; }
.pilot-r { padding: 28px; align-content: center; }

/* ===== Kontakt und Fußzeile ===== */
.contact { background: var(--gruen); color: var(--weiss); padding: 64px 0; }
.contact .eyebrow { color: var(--salbei); }
.contact p { color: var(--auf-gruen); margin-top: 14px; }
.contact-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.person { display: flex; gap: 18px; align-items: center; background: rgba(255, 255, 255, .06); border: 1px solid rgba(159, 193, 177, .35); border-radius: 16px; padding: 20px; }
.person img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--salbei); flex: none; }
.person div { display: grid; gap: 2px; font-size: .95rem; }
.person span { color: var(--auf-gruen); margin-bottom: 6px; }
.person a { color: var(--salbei); text-decoration: none; }
.person a:hover { text-decoration: underline; }

.footer { background: var(--schwarz); color: rgba(255, 255, 255, .7); font-size: .84rem; padding: 32px 0 24px; }
.footer p { max-width: none; margin-bottom: 10px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 16px; margin-top: 16px; }
.footer a { color: var(--salbei); text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* ===== Kontaktformular ===== */
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(15, 29, 23, .6); padding: 24px; overflow-y: auto; }
.modal.active { display: grid; place-items: center; }
.modal-box { position: relative; background: var(--weiss); border-radius: 16px; padding: 28px; width: 100%; max-width: 520px; border-top: 6px solid var(--gruen); }
.modal-box h2 { font-size: 1.5rem; margin: 0 0 6px; }
.modal-box > p { color: var(--text-2); margin-bottom: 18px; }
.modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--text-2); }
.contact-form { display: grid; gap: 12px; }
.contact-form label { display: grid; gap: 4px; font-size: .88rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); color: var(--schwarz); }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--salbei); border-color: var(--gruen); }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.form-status { font-weight: 600; color: var(--gruen); min-height: 1em; }
.form-notice { font-size: .8rem; color: var(--text-2); }

/* ===== Responsiv ===== */
@media (max-width: 1000px) {
  .nav { display: none; }
  .top-in { justify-content: space-between; }
}
@media (max-width: 900px) {
  .map, .map.mods, .modules { grid-template-columns: 1fr 1fr; }
  .hero-in, .sec-head, .offer, .choices, .pilot, .contact-in { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr 1fr; }
  .promise:nth-child(3n) { border-right: 1px solid var(--linie); }
  .promise:nth-child(2n) { border-right: 0; }
  .promise:nth-last-child(-n+3) { border-bottom: 1px solid var(--linie); }
  .promise:nth-last-child(-n+2) { border-bottom: 0; }
  .stage, .stage.rev { grid-template-columns: 1fr; padding: 0 20px; }
  .stage .stage-img { order: 2; }
  .stage.rev .stage-img { margin-right: -20px; }
  .stage-txt { padding-block: 24px 8px; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .back { font-size: .78rem; }
  .top .btn-sm { display: none; }
  .hero { padding: 36px 0 64px; }
  .map, .map.mods, .modules, .promises, .incl { grid-template-columns: 1fr; }
  .offer .ol, .offer .or, .pilot-l, .pilot-r { padding: 22px; }
  .promise { border-right: 0 !important; border-bottom: 1px solid var(--linie) !important; }
  .promise:last-child { border-bottom: 0 !important; }
  .plate { box-shadow: 5px 5px 0 var(--salbei); }
  .person { flex-direction: column; text-align: center; }
}