/* Native, localized diagrams in the Home content/search illustration language. */
body.nuweb-site #content .nuweb-illustration {
  --service-art-ink: #ecf7f3;
  --service-art-muted: #b5ccc3;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-width: 0;
  container-type: inline-size;
  isolation: isolate;
  color: var(--service-art-ink);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}
body.nuweb-site #content .nuweb-illustration :is(div, span, strong, svg) {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
body.nuweb-site #content .nuweb-illustration :is(div, span, strong) { padding: 0; }
body.nuweb-site #content .nuweb-illustration .service-art-composition { position: absolute; inset: 0; font-size: clamp(11px, 2.45cqw, 16px); }
body.nuweb-site #content .nuweb-illustration svg { display: block; width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
body.nuweb-site #content .nuweb-illustration strong { font-weight: 600; }
body.nuweb-site #content .nuweb-illustration .service-art-window,
body.nuweb-site #content .nuweb-illustration .service-art-project-sheet {
  position: absolute;
  border: 1px solid #237d68;
  border-radius: 14px;
  background: linear-gradient(145deg, #0d261ef5, #00140df5);
  box-shadow: 0 0 24px #00ba8a0d;
  overflow: hidden;
}
body.nuweb-site #content .nuweb-illustration .service-art-bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: 3.5% 6%; border-bottom: 1px solid #74cbb028; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-bar strong { color: var(--service-art-ink); }
body.nuweb-site #content .nuweb-illustration .service-art-dots { letter-spacing: .16em; }
body.nuweb-site #content .nuweb-illustration .service-art-body { display: grid; gap: 1.8cqw; padding: 5% 6%; }
body.nuweb-site #content .nuweb-illustration .service-art-label { display: block; color: var(--service-art-muted); font-size: max(11px, .85em); }
body.nuweb-site #content .nuweb-illustration .service-art-title { display: block; font-size: 1.13em; line-height: 1.45; }
body.nuweb-site #content .nuweb-illustration .service-art-field { display: block; border: 1px solid #718b826e; border-radius: 6px; padding: 1.2cqw 1.6cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-lines { display: grid; gap: 1.1cqw; width: 100%; }
body.nuweb-site #content .nuweb-illustration .service-art-lines span { display: block; height: 1.1cqw; min-height: 3px; width: 88%; background: #98b5a954; border-radius: 5px; }
body.nuweb-site #content .nuweb-illustration .service-art-lines span:last-child { width: 63%; }
body.nuweb-site #content .nuweb-illustration .service-art-landscape { display: block; aspect-ratio: 2.7; border: 1px solid #1b7e65; border-radius: 6px; background: radial-gradient(ellipse at 80% 110%, #55edbb 0, transparent 52%), linear-gradient(155deg, #021710 25%, #008569 51%, #032d21 52%); }
body.nuweb-site #content .nuweb-illustration .service-art-note { position: absolute; display: flex; align-items: center; gap: .7em; min-width: 28%; max-width: 55%; padding: 3% 4%; border: 1px solid #27c798; border-radius: 10px; background: linear-gradient(145deg, #08714f, #01402c); color: #ecfff6; rotate: 1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-note svg { color: #87ffd0; }
body.nuweb-site #content .nuweb-illustration .service-art-editor { left: 6%; top: 6%; width: 71%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration--content .service-art-body { gap: .9cqw; padding-block: 3%; }
body.nuweb-site #content .nuweb-illustration--content .service-art-landscape { aspect-ratio: 4.8; }
body.nuweb-site #content .nuweb-illustration--content .service-art-note { right: 4%; bottom: 8%; }
body.nuweb-site #content .nuweb-illustration .service-art-search-field { position: absolute; top: 6%; left: 6%; width: 76%; display: flex; align-items: center; gap: 1em; padding: 3% 5%; border: 1px solid #237d68; border-radius: 30px; background: #052219; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-search-result { left: 9%; top: 29%; width: 76%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-result-preview { width: 100%; height: 10cqw; border: 1px solid #1b7e65; border-radius: 6px; background: linear-gradient(135deg, #064333 0 36%, #0b7758 36% 65%, #013525 65%); }
body.nuweb-site #content .nuweb-illustration--search .service-art-note { right: 3%; bottom: 4%; }
body.nuweb-site #content .nuweb-illustration .service-art-calendar { left: 4%; top: 9%; width: 77%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .8cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-day { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #476f6066; border-radius: 6px; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-day--selected { border-color: #27c798; background: #08714f; color: #edfff7; }
body.nuweb-site #content .nuweb-illustration .service-art-time-row { display: flex; align-items: center; gap: 5%; padding-block: 1cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-time-row strong { padding: 1cqw 2cqw; border: 1px solid #27c798; border-radius: 5px; color: #8fffd0; }
body.nuweb-site #content .nuweb-illustration .service-art-booking-summary { right: 4%; bottom: 7%; width: 50%; rotate: 1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-booking-summary .service-art-body { gap: 1.1cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-booking-time { display: flex; align-items: center; gap: 2cqw; color: #9dffda; }
body.nuweb-site #content .nuweb-illustration .service-art-booking-time > span { display: grid; place-items: center; width: 7cqw; aspect-ratio: 1; border: 1px solid #27c798; border-radius: 5px; }
body.nuweb-site #content .nuweb-illustration .service-art-project-sheet--back { left: 6%; top: 13%; width: 60%; padding: 5%; rotate: -7deg; opacity: .65; }
body.nuweb-site #content .nuweb-illustration .service-art-project-sheet--back .service-art-lines { margin-top: 2cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-project-sheet--main { top: 19%; left: 18%; width: 72%; rotate: 2deg; }
body.nuweb-site #content .nuweb-illustration .service-art-project-sheet--main .service-art-landscape { aspect-ratio: 2.5; }
body.nuweb-site #content .nuweb-illustration .service-art-project-caption { display: flex; justify-content: space-between; gap: 1em; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-project-caption strong { color: #9dffda; }
body.nuweb-site #content .nuweb-illustration--portfolio .service-art-note { left: 6%; bottom: 5%; }
body.nuweb-site #content .nuweb-illustration .service-art-task-list { left: 6%; top: 12%; width: 82%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-task-list .service-art-body { gap: 3.5cqw; padding-block: 6%; }
body.nuweb-site #content .nuweb-illustration .service-art-task { display: grid; grid-template-columns: 7cqw minmax(0, 1fr); align-items: center; gap: 3cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-task-symbol { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #237d68; border-radius: 7px; background: #04452e; color: #97ffcf; }
body.nuweb-site #content .nuweb-illustration .service-art-task .service-art-lines { margin-top: 1.3cqw; }
body.nuweb-site #content .nuweb-illustration--workflow .service-art-note { right: 5%; bottom: 8%; }
body.nuweb-site #content .nuweb-illustration .service-art-browser { left: 3%; top: 11%; width: 80%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-browser .service-art-body { gap: 1.4cqw; padding-block: 4%; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-header { display: flex; align-items: center; justify-content: space-between; }
body.nuweb-site #content .nuweb-illustration .service-art-mini-brand { width: 6cqw; height: 2cqw; background: #60e5b4; border-radius: 3px; }
body.nuweb-site #content .nuweb-illustration .service-art-mini-nav { width: 23cqw; height: 1cqw; background: #98b5a954; border-radius: 3px; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: 3cqw; padding-block: 1.5cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-hero .service-art-lines { margin-top: 1.5cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-hero .service-art-landscape { aspect-ratio: 1.5; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
body.nuweb-site #content .nuweb-illustration .service-art-responsive-cards span { height: 5cqw; border: 1px solid #237d68; border-radius: 4px; background: #0b3929; }
body.nuweb-site #content .nuweb-illustration .service-art-phone { right: 4%; bottom: 6%; width: 27%; border-width: 2px; border-radius: 17px; rotate: 3deg; }
body.nuweb-site #content .nuweb-illustration .service-art-phone-speaker { width: 25%; height: .7cqw; margin: 2cqw auto 1cqw; border-radius: 4px; background: #68a08a; }
body.nuweb-site #content .nuweb-illustration .service-art-phone .service-art-body { gap: 2cqw; padding: 4% 10% 9%; }
body.nuweb-site #content .nuweb-illustration .service-art-phone .service-art-landscape { aspect-ratio: 1.1; }
body.nuweb-site #content .nuweb-illustration .service-art-language-heading { position: absolute; top: 4%; left: 0; width: 100%; text-align: center; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-language-pages { position: absolute; top: 20%; left: 4%; width: 92%; height: 63%; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page { top: 0; width: 31%; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page .service-art-bar { gap: .3em; padding: 6% 9%; font-size: max(11px, .8em); }
body.nuweb-site #content .nuweb-illustration .service-art-language-page .service-art-body { gap: 1.5cqw; padding: 7% 9%; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page .service-art-landscape { aspect-ratio: 2.5; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page--da { left: 0; top: 10%; rotate: -5deg; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page--de { left: 34.5%; z-index: 2; }
body.nuweb-site #content .nuweb-illustration .service-art-language-page--en { right: 0; top: 10%; rotate: 5deg; }
body.nuweb-site #content .nuweb-illustration .service-art-language-caption { position: absolute; bottom: 5%; left: 0; width: 100%; text-align: center; color: #9dffda; }
body.nuweb-site #content .nuweb-illustration[data-illustration-arrangement="workflow"] .service-art-language-page--da { top: 0; rotate: 0deg; }
body.nuweb-site #content .nuweb-illustration[data-illustration-arrangement="workflow"] .service-art-language-page--de { top: 8%; }
body.nuweb-site #content .nuweb-illustration[data-illustration-arrangement="workflow"] .service-art-language-page--en { top: 16%; rotate: 0deg; }
body.nuweb-site #content .nuweb-illustration .service-art-message { left: 5%; top: 9%; width: 72%; rotate: -1deg; }
body.nuweb-site #content .nuweb-illustration .service-art-message .service-art-body { gap: 3cqw; padding-block: 7%; }
body.nuweb-site #content .nuweb-illustration .service-art-attachment { display: flex; align-items: center; gap: 1em; padding: 2cqw 3cqw; border: 1px solid #237d68; border-radius: 6px; color: var(--service-art-muted); }
body.nuweb-site #content .nuweb-illustration .service-art-reply { right: 4%; bottom: 8%; width: 51%; rotate: 2deg; }
body.nuweb-site #content .nuweb-illustration .service-art-reply .service-art-body { grid-template-columns: auto 1fr; gap: 2cqw; padding: 7% 9%; }
body.nuweb-site #content .nuweb-illustration .service-art-reply svg { color: #9dffda; }
body.nuweb-site #content .nuweb-illustration .service-art-reply .service-art-lines { grid-column: 1 / -1; }

/* Figures keep the native reveal contract and give the diagram its full stage. */
body.nuweb-site #content .service-illustration-media { overflow: visible; border: 0; background: transparent; }
body.nuweb-site #content .solution-context-media.service-illustration-media { width: min(100%, 480px); margin: 22px 0 18px; border: 0; border-radius: 0; }
body.nuweb-site #content .solution-detail-hero .detail-media.service-illustration-media { width: 100%; }
body.nuweb-site #content .solution-multilingual-service > .service-illustration-media { margin: 0; }
body.nuweb-site:is(.page-support-tool-de, .page-support-tool-da, .page-support-tool-en) #content .support-hero .subhero-media.service-illustration-media { height: auto; max-height: none; }

body.nuweb-site #content .nuweb-illustration .service-art-float {
  animation: nuweb-service-art-float 9s ease-in-out infinite;
  animation-play-state: paused;
}
body.nuweb-site #content .nuweb-illustration .service-art-float--second { animation-name: nuweb-service-art-float-second; animation-duration: 11s; }
body.nuweb-site #content .nuweb-illustration[data-illustration-visible] .service-art-float { animation-play-state: running; }
@keyframes nuweb-service-art-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes nuweb-service-art-float-second { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (max-width: 700px) {
  body.nuweb-site #content .nuweb-illustration { aspect-ratio: 16 / 11; }
  body.nuweb-site #content .nuweb-illustration--languages { aspect-ratio: 4 / 3; }
  body.nuweb-site #content .nuweb-illustration .service-art-composition { font-size: clamp(11px, 2.7cqw, 14px); }
  body.nuweb-site #content .nuweb-illustration :is(.service-art-window, .service-art-project-sheet) { border-radius: 9px; }
  body.nuweb-site #content .nuweb-illustration .service-art-note { border-radius: 8px; }
  body.nuweb-site #content .nuweb-illustration .service-art-float--second { animation: none; }
  body.nuweb-site #content .nuweb-illustration .service-art-phone { border-radius: 13px; }
  body.nuweb-site #content .solution-context-media.service-illustration-media { width: min(100%, 420px); }
}
@media (prefers-reduced-motion: reduce) {
  body.nuweb-site #content .nuweb-illustration .service-art-float { animation: none; }
}