/* =========================================================
VIDEO STORY – STARTSEITE
========================================================= */
.ru-home-video {
margin-top: 75px;
padding: 55px 50px;
background: #171717;
color: #ffffff;
}
.ru-home-video-head {
max-width: 760px;
margin: 0 auto 38px;
text-align: center;
}
.ru-home-video-label {
margin-bottom: 12px;
color: #888888;
font-size: 9px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
}
.ru-home-video-title {
margin: 0 0 14px;
color: #ffffff;
font-size: clamp(27px, 4vw, 40px);
line-height: 1.15;
}
.ru-home-video-text {
max-width: 650px;
margin: 0 auto;
color: #b7b7b7;
font-size: 14px;
line-height: 1.8;
}
.ru-home-video-grid {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 45px;
align-items: center;
max-width: 930px;
margin: 0 auto;
}
.ru-home-video-copy h3 {
margin: 0 0 14px;
color: #ffffff;
font-size: 24px;
line-height: 1.2;
}
.ru-home-video-copy p {
margin: 0 0 25px;
color: #aaaaaa;
font-size: 13px;
line-height: 1.8;
}
.ru-home-video-meta {
margin-bottom: 25px;
color: #777777;
font-size: 8px;
font-weight: 600;
letter-spacing: 2.5px;
line-height: 1.8;
text-transform: uppercase;
}
.ru-home-video-button {
display: inline-block;
padding: 11px 17px;
border: 1px solid #666666;
color: #ffffff !important;
background: transparent;
text-decoration: none !important;
font-size: 9px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease;
}
.ru-home-video-button:hover {
background: #ffffff;
color: #111111 !important;
border-color: #ffffff;
}
.ru-home-video-frame {
position: relative;
width: 100%;
max-width: 440px;
margin: 0 auto;
aspect-ratio: 4 / 5;
background: #000000;
box-shadow:
0 20px 55px rgba(0,0,0,.45);
}
.ru-home-video-frame iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Tablet / Smartphone */
@media (max-width: 800px) {
.ru-home-video {
padding: 45px 28px;
}
.ru-home-video-grid {
grid-template-columns: 1fr;
gap: 35px;
}
.ru-home-video-copy {
text-align: center;
}
}
@media (max-width: 600px) {
.ru-home-video {
margin-top: 55px;
padding: 40px 18px;
}
.ru-home-video-title {
font-size: 28px;
}
.ru-home-video-text {
font-size: 13px;
}
.ru-home-video-frame {
max-width: 100%;
}
}
Ein kurzer visueller Blick auf den Duisburger Innenhafen. Historischer Backstein begegnet moderner Glasarchitektur – verbunden durch Licht, Reflexionen und geometrische Strukturen.
„Vergangenheit und Gegenwart treffen sich manchmal in einer einzigen Reflexion.“
