/* =============================================================================
   upgrade.css – Design-Upgrade-Mockup dracoeg.de (Basis c66ff1b)
   Setzt auf draco.css auf, nutzt nur dessen Tokens (Farben, Schriften, Kurven).
   Icons: Lucide v1.60.0 (ISC-Lizenz), inline eingebettet, Strichstärke 1,5.
   Kontraste: Icons --c-accent-2 auf Papier 4,86:1 / Tint 4,32:1 (Grafik ≥ 3:1);
   auf Markenblau nur Weiß bzw. --c-on-accent-dim (8,29:1).
   ============================================================================= */

:root {
  /* Schatten */
  --up-shadow-rest:  0 1px 2px rgb(var(--c-veil) / .06), 0 8px 24px -16px rgb(var(--c-veil) / .28);
  --up-shadow-hover: 0 2px 4px rgb(var(--c-veil) / .08), 0 22px 44px -22px rgb(var(--c-veil) / .45);
  --up-shadow-lift:  0 18px 40px -12px rgb(38 34 98 / .28), 0 4px 10px -4px rgb(38 34 98 / .12);
  --up-ring-light:   inset 0 0 0 1px rgb(255 255 255 / .28);
  --up-lift: -4px;
  /* Radius */
  --up-radius: 6px;
  --up-radius-round: 50%;
  /* Abstände */
  --up-space-split: 48px;
  --up-space-splits: 56px;
  --up-space-splits-sm: 40px;
  --up-pad-card: 36px 36px 32px;
  --up-pad-card-sm: 28px 24px;
  /* Flächen / Verläufe / Akzente */
  --up-card-end: #F7F8FD;
  --up-glass: rgb(255 255 255 / .06);
  --up-grid-line: rgb(255 255 255 / .045);
  --up-navy-gradient: linear-gradient(90deg, rgb(13 31 60 / .82) 0%, rgb(13 31 60 / .66) 55%, rgb(13 31 60 / .45) 100%);
  --up-veil-ort: rgb(var(--c-veil-soft) / .40);
  --up-accent-icon: var(--c-accent-2);
  /* Bewegung: Dauern + Easing */
  --m-dur: .7s; --m-dur-short: .45s; --m-dur-long: .8s; --m-dur-line: 1.6s; --m-dur-nod: .6s; --m-dur-breathe: 9s;
  --m-ease: cubic-bezier(.22,.61,.36,1);
  --m-ease-pop: cubic-bezier(.34,1.4,.64,1);
  --m-ease-line: cubic-bezier(.45,.05,.35,1);
  --m-y: 24px; --m-step: 90ms; --m-step-flow: .4s;
  --m-parallax-max: 30px;
}

/* --- 1. Icon-Set -------------------------------------------------------- */
.up-icon { display: block; width: 100%; height: 100%; stroke-width: 1.5; }
.up-icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 13px;
  border-radius: var(--up-radius-round);
  color: var(--c-accent-2);
  background: radial-gradient(circle at 30% 25%, var(--c-paper) 0%, var(--c-tint) 100%);
  box-shadow: inset 0 0 0 1px var(--c-rule);
}
.svc-card .up-icon-wrap { flex: 0 0 56px; margin-right: 20px; margin-bottom: 16px; }
@media (max-width: 767px) { .svc-card .up-icon-wrap { margin-right: 0; } }

/* --- 2. Karten: weicher Schatten, subtiler Verlauf, Hover-Lift -------------- */
.up-card {
  border-color: transparent !important;
  border-radius: var(--up-radius);
  background: linear-gradient(180deg, var(--c-paper) 0%, var(--c-paper) 60%, var(--up-card-end) 100%);
  box-shadow: var(--up-shadow-rest);
  transition: transform var(--dur-base, .3s) var(--ease, ease), box-shadow var(--dur-base, .3s) var(--ease, ease);
}
.up-card:hover, .up-card:focus-within { transform: translateY(var(--up-lift)); box-shadow: var(--up-shadow-hover); }
#ki-beratung .up-card { border-top: 3px solid var(--c-accent) !important; }

/* --- 3. Nutzen-/Zahlenblöcke ---------------------------------------------- */
.up-fact { text-align: center; }
.up-fact-icon {
  display: inline-flex; width: 52px; height: 52px; padding: 12px; margin-bottom: 14px;
  border-radius: var(--up-radius-round); color: var(--c-on-accent);
  box-shadow: var(--up-ring-light);
  background: var(--up-glass);
}
.up-benefit { position: relative; padding-left: 52px; }
.up-benefit > .up-benefit-icon { position: absolute; left: 0; top: 2px; }
.up-benefit-icon {
  display: inline-flex; width: 36px; height: 36px; padding: 7px;
  border-radius: var(--up-radius-round); color: var(--c-accent-2); background: var(--c-tint);
}
.up-benefit-card { padding-top: 28px; }
.up-benefit-card > .up-benefit-icon { width: 44px; height: 44px; padding: 9px; margin-bottom: 14px; }

/* --- 4. Abschnittstrenner und Muster ------------------------------------ */
.up-divider { line-height: 0; margin-bottom: -1px; position: relative; z-index: 1; }
.up-divider svg { display: block; width: 100%; height: 48px; }
.up-divider--tint  { color: var(--c-tint); }
.up-divider--brand { color: var(--c-accent); }
@media (max-width: 767px) { .up-divider svg { height: 26px; } }

.up-pattern-dots {
  background-image: radial-gradient(rgb(var(--c-veil-soft) / .09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 0 0;
}
.up-pattern-grid { isolation: isolate; }
.up-pattern-grid::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(var(--up-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--up-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
}
.up-pattern-grid-light {
  background-image:
    linear-gradient(rgb(var(--c-veil-soft) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--c-veil-soft) / .05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.up-diagonal { position: relative; }
.up-diagonal::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: linear-gradient(to top left, var(--c-paper) 49.5%, transparent 50%);
}
.up-diagonal-top { position: relative; }
.up-diagonal-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; pointer-events: none;
  background: linear-gradient(to bottom right, var(--c-tint) 49.5%, transparent 50%);
}

/* --- 5. Ablauf-Diagramm --------------------------------------------------- */
.up-flow { max-width: 1170px; margin: 0 auto 8px; padding: 0 15px; }
.up-flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.up-flow-line { stroke: var(--c-rule-strong); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.up-flow-line--draw { stroke: var(--c-accent-2); stroke-dasharray: none; }
.up-flow-ring { fill: var(--c-paper); stroke: var(--c-accent); stroke-width: 1.5; }
.up-flow-ico { color: var(--c-accent-2); }
.up-flow-ico * { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.up-flow-num { font-family: var(--font-display); font-size: 20px; fill: var(--c-accent); }
.bgc-tint .up-flow-ring { fill: var(--c-paper); }
.up-flow--compact { max-width: 760px; margin-bottom: 40px; }
/* Das Diagramm sitzt über dem 4er-Raster (≥1200 px). Darunter: senkrechte Zeitleiste. */
@media (max-width: 1199px) { .up-steps .up-flow { display: none; } }
@media (max-width: 1199px) {
  .up-timeline { position: relative; }
  .up-timeline > .column { position: relative; padding-left: 52px; }
  .up-timeline > .column::before {
    content: ""; position: absolute; left: 30px; top: 0; bottom: -30px; width: 2px;
    background: linear-gradient(var(--c-accent-2), var(--c-rule));
  }
  .up-timeline > .column:last-child::before { bottom: 0; }
  .up-timeline > .column::after {
    content: ""; position: absolute; left: 24px; top: 6px; width: 14px; height: 14px;
    border-radius: var(--up-radius-round); background: var(--c-paper); border: 2px solid var(--c-accent);
  }
}
@media (max-width: 767px) {
  .up-timeline > .column { padding-left: 40px; }
  .up-timeline > .column::before { left: 21px; }
  .up-timeline > .column::after { left: 15px; }
  .up-flow--compact { margin-bottom: 24px; }
}

/* --- 6. Bild-Text-Wechsel ------------------------------------------------ */
.up-splits { display: grid; gap: var(--up-space-splits); }
.up-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--up-space-split); align-items: center; }
.up-split--rev .up-split-media { order: 2; }
.up-split-media { margin: 0; border-radius: var(--up-radius); overflow: hidden; box-shadow: var(--up-shadow-rest); }
.up-split-media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.up-split-text { position: relative; padding: var(--up-pad-card); background: var(--c-paper); border-radius: var(--up-radius); box-shadow: var(--up-shadow-rest); }
.up-split-text .up-benefit-icon { margin-bottom: 14px; }
.up-split-text p { margin: 0; }
@media (max-width: 991px) {
  .up-split { grid-template-columns: 1fr; gap: 0; }
  .up-split--rev .up-split-media { order: 0; }
  .up-split-text { margin: -36px 16px 0; padding: var(--up-pad-card-sm); }
  .up-splits { gap: var(--up-space-splits-sm); }
}

/* Über uns: zweites Foto als Einschub */
.up-about-figure { position: relative; }
.up-inset {
  position: absolute; right: -28px; bottom: 56px; width: 46%;
  border: 6px solid var(--c-paper); border-radius: var(--up-radius);
  box-shadow: var(--up-shadow-hover); overflow: hidden;
}
.up-inset img { display: block; width: 100%; height: auto; }
@media (max-width: 991px) { .up-inset { right: 12px; bottom: 48px; width: 42%; border-width: 4px; } }

/* --- 7. (ersetzt durch Abschnitt 9 „Motion“, JS-gesteuert) --- */
@media (prefers-reduced-motion: reduce) {
  .up-card, .up-card:hover { transform: none !important; transition: none !important; }
}

/* --- Korrekturen nach Sichtprüfung ------------------------------------- */
.reason-list li.up-benefit { padding-left: 52px; }
.reason-list li.up-benefit > .up-benefit-icon { top: 22px; }
.up-flow--compact { max-width: 640px; margin-top: 36px; }
.up-flow-ring { stroke-width: 1.25; }
.up-icon-wrap { width: 60px; height: 60px; padding: 14px; }
.svc-card .up-icon-wrap { flex-basis: 60px; }

/* PL 20.10.2026: Kontakt-Hintergrund ohne Gesicht (Bürogebäude, schräg mit Himmel) */
.bg-panel-2.up-panel-ort{background-image:linear-gradient(var(--up-veil-ort),var(--up-veil-ort)),image-set(url(../img/gen/start-kontakt-hintergrund-800.avif) type("image/avif"),url(../img/gen/start-kontakt-hintergrund-800.webp) type("image/webp"));background-position:40% 50%}

/* ===== 9. Motion (PL 20.10.2026) – nur transform/opacity (+ Strichzeichnung), Startzustände nur unter html.js ===== */
@media (max-width: 767px) { :root { --m-dur: .45s; --m-dur-long: .6s; --m-dur-line: 1.1s; --m-y: 12px; --m-step: 60ms; } }

/* 1) Einblenden + Hochgleiten, gestaffelt (--d setzt das JS) */
.js .up-r { opacity: 0; transform: translate3d(0, var(--m-y), 0); }
.js .up-r.is-in { opacity: 1; transform: none;
  transition: opacity var(--m-dur) ease-out, transform var(--m-dur) var(--m-ease);
  transition-delay: calc(var(--d, 0) * var(--m-step)); }

/* 2) Zahlenband: Wert setzt sich (kein erfundener Zwischenwert; Zählen nur bei data-up-count > 0) */
.js .up-fact .fact-value { display: inline-block; }
.js .up-fact:not(.is-in) .fact-value { transform: scale(.92); }
.js .up-fact.is-in .fact-value { transform: none; transition: transform var(--m-dur-long) var(--m-ease) calc(var(--d,0) * var(--m-step) + 120ms); }
.js .up-fact:not(.is-in) .up-fact-icon { opacity: 0; transform: translateY(8px) rotate(-8deg); }
.js .up-fact.is-in .up-fact-icon { transition: opacity .5s ease-out, transform .6s var(--m-ease); transition-delay: calc(var(--d,0) * var(--m-step) + 200ms); }

/* 3) Ablauf-Diagramm: Linie zeichnet sich, Stationen nacheinander */
.js .up-flow .up-flow-line--draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .up-flow.is-in .up-flow-line--draw { stroke-dashoffset: 0; transition: stroke-dashoffset var(--m-dur-line) var(--m-ease-line) .15s; }
.up-flow-pop { transform-box: fill-box; transform-origin: center; }
.js .up-flow .up-flow-pop { opacity: 0; transform: scale(.6); }
.js .up-flow.is-in .up-flow-pop { opacity: 1; transform: none;
  transition: opacity var(--m-dur-short) ease-out, transform .6s var(--m-ease-pop);
  transition-delay: calc(.15s + var(--i, 0) * var(--m-step-flow)); }
/* mobile/Tablet: senkrechte Zeitleiste – Linie wächst, Punkt erscheint */
@media (max-width: 1199px) {
  .js .up-timeline > .up-r::before { transform: scaleY(0); transform-origin: top; }
  .js .up-timeline > .up-r::after { transform: scale(0); }
  .js .up-timeline > .up-r.is-in::before { transform: none; transition: transform var(--m-dur-long) var(--m-ease) calc(var(--d,0) * var(--m-step) + .2s); }
  .js .up-timeline > .up-r.is-in::after { transform: none; transition: transform var(--m-dur-short) var(--m-ease-pop) calc(var(--d,0) * var(--m-step)); }
}

/* 4) Icon-Mikroanimation: Strich zeichnet sich beim Einblenden, Nicken beim Hover */
.js .up-r .up-icon *, .js .up-r.up-icon-host .up-icon * { stroke-dasharray: 1; }
.js .up-r:not(.is-in) .up-icon * { stroke-dashoffset: 1; }
.js .up-r.is-in .up-icon * { stroke-dashoffset: 0; transition: stroke-dashoffset var(--m-dur-long) ease-out calc(var(--d,0) * var(--m-step) + .25s); }
@keyframes up-nod { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-9deg); } 70% { transform: rotate(5deg); } }
.up-icon { transform-origin: 50% 60%; }
@media (hover: hover) {
  .up-card:hover .up-icon, .up-benefit:hover .up-icon, .up-split:hover .up-benefit-icon .up-icon { animation: up-nod var(--m-dur-nod) ease-out; }
}

/* 5) Karten-Hover: Anheben + Schatten über opacity einer Pseudo-Ebene, Icon-Akzent */
.up-card { position: relative; transition: transform var(--m-dur-short) var(--m-ease); }
.up-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--up-shadow-lift);
  opacity: 0; transition: opacity var(--m-dur-short) ease-out; }
.up-card:hover, .up-card:focus-within { box-shadow: var(--up-shadow-rest); transform: translate3d(0, -6px, 0); }
.up-card:hover::after, .up-card:focus-within::after { opacity: 1; }
.up-card .up-icon-wrap { transition: transform var(--m-dur-short) var(--m-ease); }
.up-card:hover .up-icon-wrap { transform: scale(1.06); }

/* 6) Parallax Kopfbild (Wert --up-py aus rAF, nur ≥992 px, max 30 px) */
.masthead { overflow: hidden; }
.up-hero-bg { position: absolute; left: 0; right: 0; top: -32px; bottom: -32px; z-index: 0; pointer-events: none;
  background: inherit; background-attachment: scroll !important; background-size: cover;
  transform: translate3d(0, var(--up-py, 0), 0); will-change: transform; }
.page-head--foto { overflow: hidden; }
.page-head--foto:before { top: -32px; height: calc(100% + 64px); transform: translate3d(0, var(--up-py, 0), 0); }
@media (max-width: 991px) { .up-hero-bg, .page-head--foto:before { transform: none; } }

/* 7) Trenner: einziehende Welle + sehr langsame Atmung (nur Desktop) */
.up-divider svg { transform-origin: 50% 100%; }
.js .up-divider.up-r { opacity: 1; transform: none; }
.js .up-divider.up-r:not(.is-in) svg { transform: scaleY(.2); }
.js .up-divider.up-r.is-in svg { transition: transform var(--m-dur-long) var(--m-ease); }
@keyframes up-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.18); } }
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  .up-divider.is-in path { transform-box: fill-box; transform-origin: 50% 100%; animation: up-breathe var(--m-dur-breathe) ease-in-out 1s infinite alternate; }
}

/* Reduced Motion: alles sofort sichtbar, nichts bewegt sich */
@media (prefers-reduced-motion: reduce) {
  .js .up-r, .js .up-flow .up-flow-pop, .js .up-fact .fact-value, .js .up-fact .up-fact-icon { opacity: 1 !important; transform: none !important; }
  .js .up-r::before, .js .up-r::after, .up-divider svg, .up-divider path, .up-hero-bg, .page-head--foto:before { transform: none !important; }
  .js .up-r, .js .up-r *, .js .up-r::before, .js .up-r::after, .up-flow *, .up-divider *, .up-card, .up-card *, .up-card::after { transition: none !important; animation: none !important; }
  .js .up-r .up-icon *, .js .up-flow .up-flow-line--draw { stroke-dashoffset: 0 !important; }
}

/* ===== 10. Generierte Bilder (gen-bilder.md, 20.10.2026) ===== */
/* Hero: Original-Video + Original-Poster bleiben (Dimitris 20.10.2026), kein generiertes Bild im Hero */
.page-head--ki-chatbot {
  --kopfbild: url(../img/gen/chatbot-kopf-1600.webp);
  --kopfbild-modern: image-set(url(../img/gen/chatbot-kopf-1600.avif) type("image/avif"), url(../img/gen/chatbot-kopf-1600.webp) type("image/webp")) !important; }
@media (max-width: 767px) { .page-head--ki-chatbot { --kopfbild-modern: image-set(url(../img/gen/chatbot-kopf-800.avif) type("image/avif"), url(../img/gen/chatbot-kopf-800.webp) type("image/webp")) !important; } }

/* ===== 11. Rollout (20.10.2026): Bildband, Kopfbilder, Blog-Grafiken, Footer-Social ===== */
:root { --up-band-max: 960px; --up-band-space: 8px 0 56px; --up-fig-frame: linear-gradient(160deg, rgb(13 31 60) 0%, rgb(24 44 86) 100%); --up-fig-pad: 14px; }
.up-band { padding: var(--up-band-space); }
.up-band-media { max-width: var(--up-band-max); margin: 0 auto; border-radius: var(--up-radius); overflow: hidden; box-shadow: var(--up-shadow-rest); background: rgb(13 31 60); }
.up-band-media img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .up-band { padding: 0 0 40px; } }
.page-head--ki-beratung { --kopfbild: url(../img/gen/ki-beratung-kopf-1600.webp);
  --kopfbild-modern: image-set(url(../img/gen/ki-beratung-kopf-1600.avif) type("image/avif"), url(../img/gen/ki-beratung-kopf-1600.webp) type("image/webp")) !important; }
.page-head--websites { --kopfbild: url(../img/gen/websites-kopf-1600.webp);
  --kopfbild-modern: image-set(url(../img/gen/websites-kopf-1600.avif) type("image/avif"), url(../img/gen/websites-kopf-1600.webp) type("image/webp")) !important; }
@media (max-width: 767px) {
  .page-head--ki-beratung { --kopfbild-modern: image-set(url(../img/gen/ki-beratung-kopf-800.avif) type("image/avif"), url(../img/gen/ki-beratung-kopf-800.webp) type("image/webp")) !important; }
  .page-head--websites { --kopfbild-modern: image-set(url(../img/gen/websites-kopf-800.avif) type("image/avif"), url(../img/gen/websites-kopf-800.webp) type("image/webp")) !important; } }
/* Blog-Inline-Grafiken: Navy-Rahmen, Inhalt unverändert */
.up-art-fig > img { display: block; width: 100%; height: auto; padding: var(--up-fig-pad); background: var(--up-fig-frame); border-radius: var(--up-radius); box-shadow: var(--up-shadow-rest); }
/* Footer: Instagram */
.up-social { display: inline-flex; width: 22px; height: 22px; vertical-align: middle; color: inherit; opacity: .85; transition: opacity var(--m-dur-short) ease-out, transform var(--m-dur-short) var(--m-ease); }
.up-social:hover, .up-social:focus-visible { opacity: 1; transform: translateY(-2px); }

/* Footer: Instagram-Icon + 4 Links bleiben ab 768 px in einer Zeile (ohne Leerraum zwischen Inline-Elementen) */
@media (min-width: 768px) {
  .footer-links { display: flex; flex-wrap: nowrap; align-items: center; }
  .footer-links a { white-space: nowrap; }
  .footer-links .up-social { flex-shrink: 0; margin-right: 4px; }
}
@media (min-width: 992px) { .footer-links { justify-content: flex-end; } }

/* Release 2026-10-20: Solange die Cookie-Leiste steht, 2 px Reserve unter der Fusszeile (consent.css setzt
   genau --cc-hoehe; auf der Startseite blieb der Copyright-Rand durch Subpixel-Hoehen 0,8 px unter der Leiste, T6b). */
@media screen and (max-width: 1199px), screen and (max-height: 819px) {
  html.show--consent:root body { padding-bottom: calc(var(--cc-hoehe, 0px) + 2px); }
}

/* Release 2026-10-20, Design-Check B2: Zwischen 768 und 1199 px brach das Hauptmenue mit „Blog“
   zweizeilig um (Kopf 205 statt 165 px). Engere Punkte (padding 0 9px, 14px) reichten nicht
   (gemessen: weiter 2 Reihen bei 768/820/1024/1199). Deshalb gilt das Burger-Menue bis 1199 px. */
@media (min-width: 768px) and (max-width: 1199px) {
  .navbar-header { float: none; }
  .navbar-toggle { display: block; }
  .navbar-collapse.collapse { display: none !important; height: auto !important; }
  .navbar-collapse.collapse.in { display: block !important; overflow-y: auto !important; }
  .container > .navbar-collapse { margin-left: -15px; margin-right: -15px; }
  .navbar-nav, .navbar-right { float: none !important; margin: 0 !important; padding-top: 20px; }
  .navbar-nav > li, .navbar-nav > li.nav-cta { float: none; padding-left: 0; }
  .navbar-nav > li > a, .navbar-nav > li.nav-cta > a,
  .navbar.affix .navbar-nav > li.nav-cta > a { display: block; padding: 12px 20px; margin: 0; }
  .navbar.affix .navbar-nav { padding-top: 20px; }
  .nav-cta .line-top, .nav-cta .line-bottom { display: none; }
}

/* Release 2026-10-20, Design-Check K5: In #zahlen brach bei 1200/1440 px in „Monheim“ das Icon
   ueber den Wert (nowrap allein reichte nicht, gemessen). Icon und Wert stehen deshalb in
   einer Flex-Zeile (.up-fact-head in index.html), der Wert bricht nie um. */
.up-fact .fact-value { white-space: nowrap; }
.up-fact-head { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 10px; }
.up-fact-head .up-fact-icon { flex: 0 0 28px; width: 28px; height: 28px; padding: 4px; margin-bottom: 0; }
/* H10: Kachel darf schrumpfen, der Wert skaliert mit (bleibt in der Spalte). */
.up-fact { min-width: 0; }
.up-fact .fact-value { font-size: clamp(1.375rem, 1.1rem + 1vw, 2rem); letter-spacing: -.01em; }
.up-fact-head .fact-value { margin: 0; }
.up-fact-head + .fact-label { margin-top: 14px; }