html, body { width: 100.0%; height: 100.0%; }
body { min-width: 375px; overflow-y: scroll; font-size: calc(12px + (16 - 12) * (100vw - 375px) / (3840 - 1024)); line-height: 1.4; background-color: #213159; }
*, :before, :after { margin: 0; padding: 0; border: 0; border-style: solid; transition: all 150ms ease-in-out 0ms; box-sizing: border-box; }
a { text-decoration: none; }
img { display: block; }
video { position: fixed; top: 0; left: 0; width: auto; height: 100.0%; margin: 0 auto; }
a:hover { cursor: pointer; }
/* --- Scroll --- */
.scroll { overflow: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--sofa) transparent; }
.scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll::-webkit-scrollbar-track { background: silver; border-radius: 0; }
.scroll::-webkit-scrollbar-thumb { background-color: var(--sofa); border: transparent; border-radius: 0; }
.basf { background-color: #004a96; } .basf * { color: #fff; }
.asp { background-color: #3ab6ec; } .asp * { color: #fff; }
.task { background-color: #f5f5f5; } .task * { color: #313835; }
.zuna { background-color: #0acbaa; } .zuna * { color: #fff; }
.page { position: relative; z-index: 2; width: 98.00%; max-width: 1200px; min-height: 100.0%; margin: 0 auto; display: flex; flex-flow: column wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.page .main { transform: rotate(-1.50deg); width: 100.0%; aspect-ratio: 1 / 0.50; padding: 2.00em; border-radius: 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; background-color: white; }
.page .main:hover { transform: rotate(0.00deg); }
.page .main > a { flex: 1 1 50.00%; min-width: 300px; padding: 7.00em 2.00em 2.00em; background-position: top 2.00em left 2.00em; background-repeat: no-repeat; display: flex; flex-flow: column wrap; justify-content: flex-start; align-content: stretch; align-items: stretch; }
.page .main > a > span { max-width: calc(100.0% - 7.50em); }
.page .main > a .link { display: inline-block; margin-top: 1.00em; padding-right: 2.00em; background-repeat: no-repeat; background-position: right center; background-image: url(../img/arrow_forward_white.svg); background-size: 1.50em; }
.page .main > a.task .link { background-image: url(../img/arrow_forward.svg); }
.page > .main > a.basf { background-size: auto 4.00em; background-image: url(../img/Logo_BASF.svg); }
.page > .main > a.asp { background-size: auto 4.00em; background-image: url(../img/Logo_ASP-white.svg); }
.page > .main > a.task { background-size: auto 3.50em; background-image: url(../img/Logo_Toyota-TASK.svg); }
.page > .main > a.zuna-de { background-size: auto 4.00em; background-image: url(../img/Logo_ZUNA-DE-word_white.svg); }
.page > .main > a.zuna-en { background-size: auto 4.00em; background-image: url(../img/Logo_ZUNA-EN-inv_word_white.svg); }
.page > .main > a:nth-child(even) { align-content: flex-end; align-items: flex-end; background-position: top 2.00em right 2.00em; }
/* --- Zoom --- */
.zoom { position: fixed; top: 0; left: 0; width: 100.0%; height: 100.0%; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: center; background-color: #00000050; transform: scale(0); }
.zoom:before { position: absolute; z-index: 2; top: 1.00em; right: 1.00em; width: 2.00em; aspect-ratio: 1 / 1; border-radius: 100.0%; background-color: black; background-repeat: no-repeat; background-position: center; background-image: url(../img/close_white.svg); background-size: 1.50em; content: ''; }
.zoom > .scroll { width: 96.00%; max-width: 1920px; height: 90.00%; cursor: n-resize}
.zoom > .scroll > img { width: 100.0%; height: auto; }
.zoom:target { transform: scale(1); }
/* --- Header + Footer --- */
header, footer { width: 100.0%; padding: 1.00em 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: flex-end; align-items: flex-end; }
header *, footer * { max-width: 50.00em; color: #fff; }
header > *, footer > * { margin: 0.25em 0; }
header { margin-bottom: 1.00em; border-radius: 0 0 1.00em 1.00em; background-repeat: no-repeat; background-position: top 1.50em right 2.00em; background-size: 20.00% auto; background-image: url(../img/Logo-IT-T_word.svg); }
footer { margin-top: 1.00em; border-radius: 1.00em 1.00em 0 0; }
/* --- Pro --- */
.page .pro { transform: rotate(0deg); }
.page .pro > div { width: 100.0%; }
.page .pro .swiper-container { position: relative; width: 100.0%; }
.page .pro .slide { position: relative; padding: 3.00em 2.00em; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; align-items: stretch; }
.page .pro .slide > div { flex: 4 1 20.00em; padding: 0.50em 1.00em; overflow: hidden; }
.page .pro .slide > div + div { flex: 1 1 20.00em; padding-top: 7.50em; background-position: top 1.00em left 1.00em; background-repeat: no-repeat; }
.page .pro .slide > div > .teaser { width: 100.0%; margin-bottom: 1.00em; }
.page .pro .slide > div > .screen { width: 100.0%; aspect-ratio: 1 / 1; background: red; }
.page .pro .slide > div > div > img { width: 100.0%; height: auto; }
.page .pro .slide > div > .screen > img { width: 100.0%; height: auto; cursor: zoom-in; }
.page .pro > div > .basf .slide > div + div { background-size: auto 4.00em; background-image: url(../img/Logo_BASF.svg); }
.page .pro > div > .asp .slide > div + div { background-size: auto 4.00em; background-image: url(../img/Logo_ASP-white.svg); }
.page .pro > div > .task .slide > div + div { background-size: auto 3.50em; background-image: url(../img/Logo_Toyota-TASK.svg); }
.page .pro > div > .zuna-de .slide > div + div { background-size: auto 4.00em; background-image: url(../img/Logo_ZUNA-DE-word_white.svg); }
.page .pro > div > .zuna-en .slide > div + div { background-size: auto 4.00em; background-image: url(../img/Logo_ZUNA-EN-inv_word_white.svg); }
.page .pro .slide table td { padding: 0.50em 0.50em 0.50em 0; vertical-align: top; }
.task { --swiper-theme-color: #313835; }
/* --- BTN --- */
a.back, a.share { position: absolute; z-index: 2; top: 1.00em; aspect-ratio: 1 / 1; background-repeat: no-repeat; }
a.back { left: 1.00em; background-size: 2.,0em; background-position: left center; }
a.share { right: 1.00em; width: 2.50em; background-size: 1.50em; background-position: top 0.375em center; background-image: url('../img/ios_share.svg'); border-radius: 100.0%; background-color: black; }
a.back-de:before { content: 'Zurück'; }
a.back-en:before { content: 'Back'; }
/* --- W-Man round --- */
.page > .main > .wman { position: absolute; top: calc(50.00% - 7.50em); left: calc(50.00% - 7.50em); right: auto; width: 15.00em; aspect-ratio: 1 / 1; border-radius: 100.0%; aspect-ratio: 1 / 1; box-shadow: inset 0 0 0 0.75em #ffffff, 1.00em 1.00em 4.50em #46586290;
background-color: white; background-repeat: no-repeat; background-position: top -1.25em left; background-image: url(../img/WMan.svg); background-size: cover; }
.wman > span { position: absolute; top: -1.25em; left: 0; width: 100.0%; height: 50.00%; }
.wman > span > img { position: absolute; top: 0; left: 0; width: 100.0%; height: 100.00%; object-fit: cover; object-position: top center; }
/* =================================
mobil
================================= */
@media screen and (max-width : 800px) { .page .main > a > span { max-width: 100.0%; }
.page .main { transform: rotate(0.00deg); }
.page > .main > a { background-position: top 2.00em right 2.00em; }
.page > .main > .wman,
.swiper-pagination,
.swiper-button-next, .swiper-button-prev { display: none !important; }}
@media (orientation: portrait) { video { width: auto; height: 100.0%; }}
@media (orientation: landscape) { video { width: 100.0%; height: auto; }}
/* =================================
Typo
================================= */
.nob { white-space: nowrap; }
table li + li { margin-top: 0; }
table li + li { margin-top: 0; }
h3, strong { font-size: 1.00em; }
h1 + *, h2 + *,
h3 + *, p + *,
li + li { font-size: 1.00em; margin-top: 0.50em; }
p > a { font-weight: bold; }
p > a:hover { text-decoration: underline; }
p.clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 5; }
p.note { font-size: 0.85em; margin-left: 0.60em; text-indent: -0.60em; }
body { font-family: 'sofo-sans-reg', Arial, sans-serif; font-family:: normal; font-weight: 400; }
h1, h2, h3 { font-family: 'sofo-seri-ita', Arial, sans-serif; font-family:: normal; font-weight: 400; }
p, li, td + td { -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }
@font-face { font-family: 'sofo-sans-reg'; src: url('../fonts/pt_sans-regular.woff2') format('woff2'); }
@font-face { font-family: 'sofo-seri-ita'; src: url('../fonts/pt_serif-italic.woff2') format('woff2'); }
/* =================================
Layout
=================================
* { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.10) !important; }
* { background-color: rgba(000,000,000,0.05) !important; }
div { background-color: rgba(255,000,000,0.05) !important; }
div { background-image: none !important; }
* { color: rgba(000,000,000,1.0) !important; }
img { box-shadow: inset 0 0 0 1px rgba(000,000,000,0.40) !important; }
/* =================================
END
================================= */
.comment { color: #ff00ff; }