/** * Swiper 14.0.1 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2026 Vladimir Kharlampidi * * Released under the MIT License * * Released on: June 29, 2026 */ :root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}} /* space-grotesk-300 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 300; src: url('../fonts/space-grotesk-v22-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* space-grotesk-regular - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; src: url('../fonts/space-grotesk-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* space-grotesk-500 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; src: url('../fonts/space-grotesk-v22-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* space-grotesk-600 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; src: url('../fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* space-grotesk-700 - latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; src: url('../fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } /* ========================================================= RHEINSEITE – CSS-STRUKTUR 01. Design-Variablen & Basis 02. Header, Navigation & Stage 03. Antrieb & Scroll-Animationen 04. Zitat 05. Leistungen 06. Profil 07. Projekte 08. Kundenstimmen 09. Footer & Kontakt 10. Scroll-to-top 11. Warum Werft? 12. Rheinseite in Zahlen 13. Projektdetail & Browserrahmen ========================================================== */ /* ========================================================= RHEINSEITE – ZENTRALE DESIGN-VARIABLEN Farben, Maße und Bewegungen lassen sich hier global steuern. ========================================================== */ :root { /* Farben */ --rhnst-color-white: #ffffff; --rhnst-color-navy: #202f79; --rhnst-color-blue: #3d59ff; --rhnst-color-text: #111111; --rhnst-color-logo: #343434; --rhnst-color-border: rgb(32 47 121 / 12%); --rhnst-font-size-copy: clamp(.85rem, 2.2vw, 1.1rem); --rhnst-font-size-intro: clamp(.85rem, 2.2vw, 1.1rem); /* Transparenzen */ --rhnst-header-background: rgb(255 255 255 / 94%); /* Schriften – später einfach durch lokale Webfonts ersetzen */ --rhnst-font-base: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif; --rhnst-font-logo: Georgia, "Times New Roman", serif; /* Layout */ --rhnst-container-width: 80rem; --rhnst-page-gutter: clamp(1.25rem, 7vw, 7rem); --rhnst-header-height: clamp(6.25rem, 10vw, 8.25rem); --rhnst-section-space: clamp(5rem, 10vw, 10rem); /* Ecken */ --rhnst-radius-small: 0.2rem; --rhnst-radius-medium: 0.5rem; --rhnst-radius-large: 1rem; /* Bewegung */ --rhnst-transition-fast: 180ms ease; --rhnst-transition-base: 280ms ease; } /* ========================================================= BASIS ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--rhnst-header-height) + 1.5rem); } body { margin: 0; background: var(--rhnst-color-white); color: var(--rhnst-color-text); font-family: var(--rhnst-font-base); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } body.rhnst-menu-is-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } .rhnst-container { width: min( calc(100% - (2 * var(--rhnst-page-gutter))), var(--rhnst-container-width) ); margin-inline: auto; } .rhnst-skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000; padding: 0.75rem 1rem; background: var(--rhnst-color-navy); color: var(--rhnst-color-white); transform: translateY(calc(-100% - 1rem)); transition: transform var(--rhnst-transition-fast); } .rhnst-skip-link:focus { transform: translateY(0); } /* ========================================================= HEADER ========================================================== */ .rhnst-header { position: sticky; top: 0; z-index: 100; width: 100%; background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--rhnst-transition-base), border-color var(--rhnst-transition-base), box-shadow var(--rhnst-transition-base); } .rhnst-is-scrolled .rhnst-header { background: var(--rhnst-header-background); border-bottom-color: var(--rhnst-color-border); box-shadow: 0 0.5rem 2rem rgb(11 23 56 / 5%); -webkit-backdrop-filter: blur(0.8rem); backdrop-filter: blur(0.8rem); } .rhnst-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(2rem, 5vw, 5rem); min-height: var(--rhnst-header-height); } .rhnst-header__logo { position: relative; z-index: 102; display: block; flex: 0 0 auto; width: clamp(12rem, 21vw, 18.5rem); color: var(--rhnst-color-logo); font-family: var(--rhnst-font-logo); font-size: clamp(2.25rem, 3.6vw, 3.65rem); font-style: italic; font-weight: 900; letter-spacing: -0.06em; line-height: 0; } .rhnst-header__logo img, .rhnst-header__logo svg { display: block; width: 100%; height: auto; } @media (max-width: 500px) { .rhnst-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .rhnst-header__logo { grid-column: 2; justify-self: center; width: clamp(7.5rem, 30vw, 9rem); margin: 0; transform: none; } .rhnst-header__logo img, .rhnst-header__logo svg { display: block; width: 100%; height: auto; } } .rhnst-header { --rhnst-header-height: 7.5rem; transition: min-height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease; } .rhnst-header__inner { min-height: var(--rhnst-header-height); transition: min-height 0.35s ease; } .rhnst-is-scrolled .rhnst-header { --rhnst-header-height: 5.5rem; } .rhnst-header__logo { width: 12rem; transition: width 0.35s ease; } .rhnst-is-scrolled .rhnst-header__logo { width: 8.5rem; } @media (max-width: 768px) { .rhnst-header { --rhnst-header-height: 6rem; } .rhnst-is-scrolled .rhnst-header { --rhnst-header-height: 4rem; } .rhnst-header__logo { width: clamp(7.5rem, 30vw, 9rem); } .rhnst-is-scrolled .rhnst-header__logo { width: clamp(5.75rem, 22vw, 7rem); } } .rhnst-navigation { margin-left: auto; } .rhnst-navigation__list { display: flex; align-items: center; gap: clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; } .rhnst-navigation__link { position: relative; display: inline-flex; padding-block: 0.75rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: color var(--rhnst-transition-fast); } .rhnst-navigation__link::after { position: absolute; right: 0; bottom: 0.1rem; left: 0; height: 0.16rem; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right center; transition: transform var(--rhnst-transition-base); } .rhnst-navigation__link:hover, .rhnst-navigation__link:focus-visible, .rhnst-navigation__link--active { color: var(--rhnst-color-blue); } .rhnst-navigation__link:hover::after, .rhnst-navigation__link:focus-visible::after, .rhnst-navigation__link--active::after { transform: scaleX(1); transform-origin: left center; } .rhnst-menu-toggle { display: none; } /* ========================================================= STAGE / ANTRIEB ========================================================== */ .rhnst-stage { display: grid; align-items: center; min-height: calc(100svh - var(--rhnst-header-height)); padding-block: clamp(5rem, 9vh, 8rem); scroll-margin-top: var(--rhnst-header-height); } .rhnst-stage__inner { display: flex; flex-direction: column; align-items: center; text-align: center; } .rhnst-stage__eyebrow { margin: 0 0 clamp(2.5rem, 5vw, 4rem); font-size: clamp(1rem, 1.3vw, 1.4rem); font-weight: 500; letter-spacing: 0.22em; line-height: 1.5; text-transform: uppercase; } .rhnst-stage__title { margin: 0; color: var(--rhnst-color-navy); font-size: clamp(3.25rem, 8vw, 7.6rem); font-weight: 800; letter-spacing: -0.055em; line-height: 0.96; } .rhnst-stage__title span { display: block; } .rhnst-stage__intro { max-width: 54rem; margin: clamp(2.5rem, 5vw, 4.1rem) 0 0; color: var(--rhnst-color-blue); font-size: var(--rhnst-font-size-intro); font-weight: 700; letter-spacing: -0.025em; line-height: 1.27; } .rhnst-stage__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; width: min(100%, 46.5rem); margin-top: clamp(3rem, 7vw, 6.5rem); } .rhnst-button { display: inline-flex; align-items: center; justify-content: center; min-height: 4.75rem; padding: 1rem 2rem; border: 2px solid transparent; border-radius: var(--rhnst-radius-small); color: var(--rhnst-color-white); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 700; line-height: 1.2; transition: background-color var(--rhnst-transition-base), border-color var(--rhnst-transition-base), color var(--rhnst-transition-base), transform var(--rhnst-transition-fast); } .rhnst-button--navy { background: var(--rhnst-color-navy); } .rhnst-button--blue { background: var(--rhnst-color-blue); } .rhnst-button:hover, .rhnst-button:focus-visible { border-color: currentColor; background: var(--rhnst-color-white); color: var(--rhnst-color-navy); transform: translateY(-0.15rem); } .rhnst-button:focus-visible, .rhnst-navigation__link:focus-visible, .rhnst-header__logo:focus-visible, .rhnst-menu-toggle:focus-visible { outline: 0.2rem solid var(--rhnst-color-blue); outline-offset: 0.25rem; } .rhnst-menu-is-open .rhnst-header { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ========================================================= RESPONSIVE NAVIGATION ========================================================== */ @media (max-width: 62rem) { .rhnst-menu-toggle { position: fixed; right: max(1.25rem, env(safe-area-inset-right)); bottom: max(1.25rem, env(safe-area-inset-bottom)); top: auto; left: auto; z-index: 1002; display: grid; align-content: center; gap: 0.45rem; width: 3.75rem; height: 3.75rem; padding: 1rem; border: 1px solid rgb(32 47 121 / 12%); border-radius: 50%; background: var(--rhnst-color-white); box-shadow: 0 0.4rem 1rem rgb(11 23 56 / 12%), 0 1rem 2.5rem rgb(11 23 56 / 18%); color: var(--rhnst-color-navy); cursor: pointer; transition: background-color var(--rhnst-transition-base), color var(--rhnst-transition-base), box-shadow var(--rhnst-transition-base), transform var(--rhnst-transition-fast); } .rhnst-menu-toggle:hover, .rhnst-menu-toggle:focus-visible { box-shadow: 0 0.5rem 1.25rem rgb(11 23 56 / 16%), 0 1.25rem 3rem rgb(11 23 56 / 24%); transform: translateY(-0.15rem); } .rhnst-menu-is-open .rhnst-menu-toggle { border-color: transparent; background: var(--rhnst-color-navy); color: var(--rhnst-color-white); } .rhnst-is-scrolled .rhnst-header { -webkit-backdrop-filter: none; backdrop-filter: none; } .rhnst-menu-toggle span { display: block; width: 100%; height: 0.13rem; background: currentColor; transition: transform var(--rhnst-transition-base); } .rhnst-menu-is-open .rhnst-menu-toggle span:first-child { transform: translateY(0.29rem) rotate(45deg); } .rhnst-menu-is-open .rhnst-menu-toggle span:last-child { transform: translateY(-0.29rem) rotate(-45deg); } .rhnst-navigation { position: fixed; inset: 0; z-index: 101; display: grid; align-items: center; padding: calc(var(--rhnst-header-height) + 2rem) var(--rhnst-page-gutter) 3rem; background: var(--rhnst-color-white); opacity: 0; visibility: hidden; transform: translateY(-1rem); transition: opacity var(--rhnst-transition-base), visibility var(--rhnst-transition-base), transform var(--rhnst-transition-base); width: 100vw; height: 100vh; min-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } .rhnst-menu-is-open .rhnst-navigation { opacity: 1; visibility: visible; transform: translateY(0); } .rhnst-navigation__list { flex-direction: column; align-items: flex-start; gap: 1rem; } .rhnst-navigation__link { font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: 0.08em; } } @media (max-width: 42rem) { :root { --rhnst-header-height: 5.5rem; } .rhnst-header__logo { font-size: clamp(2rem, 10vw, 2.65rem); } .rhnst-stage { align-items: start; min-height: auto; padding-block: clamp(4rem, 14vw, 6rem); } .rhnst-stage__eyebrow { margin-bottom: 2rem; font-size: 0.72rem; } .rhnst-stage__title { font-size: clamp(3rem, 15vw, 5rem); line-height: 0.98; } .rhnst-stage__break { display: none; } .rhnst-stage__actions { grid-template-columns: 1fr; gap: 0.85rem; margin-top: 3rem; } .rhnst-button { min-height: 4.25rem; } } /* Bewegungen für entsprechende Systemeinstellungen reduzieren. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } /* ========================================================= ANTRIEB ========================================================== */ .rhnst-antrieb { --rhnst-antrieb-overlay-color: #1c2972; --rhnst-antrieb-overlay-opacity: 0.62; --rhnst-antrieb-line-width: 0.16rem; --rhnst-antrieb-line-inside: 6.5rem; --rhnst-antrieb-line-outside: 13.5rem; padding-block: clamp(2rem, 5vw, 5rem) var(--rhnst-section-space); scroll-margin-top: var(--rhnst-header-height); } /* * Bildbereich */ .rhnst-antrieb__media { position: relative; } .rhnst-antrieb__image-wrapper { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; overflow: hidden; } .rhnst-antrieb__image { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .rhnst-stage { position: relative; } /* ========================================================= SCROLL-HINWEIS DER STAGE ========================================================== */ .rhnst-stage__scroll-indicator { position: absolute; right: 0; bottom: clamp(1.25rem, 3vh, 2.5rem); left: 0; z-index: 5; display: flex; align-items: center; justify-content: center; width: clamp(3rem, 4vw, 3.75rem); aspect-ratio: 1; margin-inline: auto; border: 0.12rem solid var(--rhnst-color-blue); border-radius: 50%; color: var(--rhnst-color-blue); transition: background-color var(--rhnst-transition-base), color var(--rhnst-transition-base), transform var(--rhnst-transition-fast), opacity var(--rhnst-transition-base), visibility var(--rhnst-transition-base); } .rhnst-stage__scroll-indicator.rhnst-stage__scroll-indicator--hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(1rem); } .rhnst-stage__scroll-icon { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: rhnst-scroll-arrow 1.8s ease-in-out infinite; } @media (max-width: 768px) { .rhnst-stage__scroll-indicator { display: none; } } /* * Hover und Tastaturfokus */ .rhnst-stage__scroll-indicator:hover, .rhnst-stage__scroll-indicator:focus-visible { background-color: var(--rhnst-color-blue); color: var(--rhnst-color-white); transform: scale(1.06); } .rhnst-stage__scroll-indicator:focus-visible { outline: 0.2rem solid var(--rhnst-color-blue); outline-offset: 0.3rem; } /* * Dezente Bewegung des Pfeils */ @keyframes rhnst-scroll-arrow { 0%, 100% { transform: translateY(-0.2rem); } 50% { transform: translateY(0.3rem); } } /* * Bei reduzierten Bewegungseinstellungen nicht animieren */ @media (prefers-reduced-motion: reduce) { .rhnst-stage__scroll-icon { animation: none; } } /* * Blauer Multiply-Layer */ .rhnst-antrieb__overlay { position: absolute; inset: 0; z-index: 1; background-color: var(--rhnst-antrieb-overlay-color); mix-blend-mode: multiply; opacity: var(--rhnst-antrieb-overlay-opacity); pointer-events: none; } /* * Text auf dem Bild */ .rhnst-antrieb__image-content { position: relative; z-index: 2; width: min(100% - 3rem, 44rem); margin-inline: auto; color: var(--rhnst-color-white); text-align: center; } .rhnst-antrieb__title { margin: 0; font-size: clamp(2.25rem, 5vw, 4.15rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; } .rhnst-antrieb__image-text { max-width: 40rem; margin: clamp(2rem, 4vw, 3.5rem) auto 0; font-size: var(--rhnst-font-size-copy); font-weight: 700; line-height: 1.35; } /* * Vertikale Verbindungslinie */ .rhnst-antrieb__line { position: absolute; top: calc(100% - var(--rhnst-antrieb-line-inside)); left: 50%; z-index: 3; display: block; width: var(--rhnst-antrieb-line-width); height: calc( var(--rhnst-antrieb-line-inside) + var(--rhnst-antrieb-line-outside) ); background: var(--rhnst-color-blue); transform: translateX(-50%); } /* * Unterer Textbereich */ .rhnst-antrieb__content { width: min(100%, 48rem); margin: calc(var(--rhnst-antrieb-line-outside) + 1.5rem) auto 0; text-align: center; } .rhnst-antrieb__content-title { margin: 0; color: var(--rhnst-color-blue); font-size: clamp(2.5rem, 5.5vw, 4.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; } .rhnst-antrieb__content-text { max-width: 43rem; margin: clamp(2rem, 4vw, 3.25rem) auto 0; color: var(--rhnst-color-text); font-size: var(--rhnst-font-size-copy); font-weight: 700; line-height: 1.35; } /* ========================================================= RESPONSIVE ========================================================== */ @media (max-width: 48rem) { .rhnst-antrieb { --rhnst-antrieb-line-inside: 4rem; --rhnst-antrieb-line-outside: 8rem; } .rhnst-antrieb__image-wrapper { aspect-ratio: 4 / 5; } .rhnst-antrieb__image-content { width: min(100% - 2.5rem, 35rem); } .rhnst-antrieb__image-text { font-weight: 600; } .rhnst-antrieb__content { margin-top: calc(var(--rhnst-antrieb-line-outside) + 1rem); } } /* ========================================================= SCROLL-ANIMATIONEN ========================================================== */ :root { --rhnst-reveal-distance: 2.5rem; --rhnst-reveal-duration: 850ms; --rhnst-reveal-delay: 0ms; --rhnst-reveal-easing: cubic-bezier(0.22, 1, 0.36, 1); } /* * Die Ausgangswerte werden erst durch JavaScript aktiviert. * So bleiben alle Inhalte sichtbar, falls JavaScript ausfällt. */ .rhnst-reveal.rhnst-reveal-is-ready { opacity: 0; transform: translateY(var(--rhnst-reveal-distance)); transition: opacity var(--rhnst-reveal-duration) var(--rhnst-reveal-easing), transform var(--rhnst-reveal-duration) var(--rhnst-reveal-easing); transition-delay: var(--rhnst-reveal-delay); } /* * Sichtbarer Zustand */ .rhnst-reveal.rhnst-reveal-is-visible { opacity: 1; transform: translate3d(0, 0, 0); } /* * Optionale Richtungen */ .rhnst-reveal--left.rhnst-reveal-is-ready { transform: translateX(calc(var(--rhnst-reveal-distance) * -1)); } .rhnst-reveal--right.rhnst-reveal-is-ready { transform: translateX(var(--rhnst-reveal-distance)); } .rhnst-reveal--scale.rhnst-reveal-is-ready { transform: scale(0.97); } /* * Animationen bei entsprechender Systemeinstellung deaktivieren */ @media (prefers-reduced-motion: reduce) { .rhnst-reveal.rhnst-reveal-is-ready, .rhnst-reveal.rhnst-reveal-is-visible { opacity: 1; transform: none; transition: none; } } /* ========================================================= ZITAT MIT PARALLAX-HINTERGRUND ========================================================== */ .rhnst-quote { --rhnst-quote-card-start: #1c2972; --rhnst-quote-card-end: #405bff; --rhnst-quote-background-overlay: rgb(9 20 54 / 20%); --rhnst-parallax-offset: 0px; --rhnst-parallax-scale: 1.08; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 10vw, 9rem); } /* * Hintergrundebene */ .rhnst-quote__background { position: absolute; inset: -10% 0; z-index: -2; overflow: hidden; pointer-events: none; } .rhnst-quote__background-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate3d(0, var(--rhnst-parallax-offset), 0) scale(var(--rhnst-parallax-scale)); transform-origin: center; will-change: transform; } /* * Dezente Abdunklung des Meeresbildes */ .rhnst-quote__background-overlay { position: absolute; inset: 0; z-index: 1; background: var(--rhnst-quote-background-overlay); pointer-events: none; } /* * Inhalt über dem Hintergrund */ .rhnst-quote__inner { position: relative; z-index: 2; } /* * Blaue Zitatkarte */ .rhnst-quote__card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 70rem); min-height: clamp(31rem, 53vw, 40rem); margin: 0 auto; padding: clamp(3.5rem, 7vw, 6rem) clamp(1.5rem, 8vw, 8rem); border-radius: var(--rhnst-radius-small); background: linear-gradient( 145deg, var(--rhnst-quote-card-start) 0%, var(--rhnst-quote-card-end) 100% ); box-shadow: 0 2rem 5rem rgb(7 18 50 / 20%); color: var(--rhnst-color-white); text-align: center; } .rhnst-quote { --rhnst-parallax-scale: 1.14; } .rhnst-quote__background { inset: -16% 0; } /* ========================================================= MODERNE ZITATKARTE ========================================================== */ .rhnst-quote__card { --rhnst-quote-card-start: #152064; --rhnst-quote-card-end: #405bff; --rhnst-quote-card-blend-mode: multiply; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, 74rem); min-height: clamp(38rem, 56vw, 46rem); margin: 0 auto; overflow: hidden; border-radius: var(--rhnst-radius-small); /* * Transparente Basis für einen zuverlässig * lesbaren weißen Text. */ background: rgb(20 31 101 / 28%); box-shadow: 0 2.5rem 6rem rgb(4 11 36 / 25%); color: var(--rhnst-color-white); text-align: center; -webkit-backdrop-filter: saturate(115%) contrast(105%); backdrop-filter: saturate(115%) contrast(105%); mix-blend-mode: soft-light; } /* * Der Verlauf wird mit dem dahinterliegenden Foto verrechnet. * Der Text bleibt davon unberührt. */ .rhnst-quote__card::before { position: absolute; inset: 0; z-index: 0; background: linear-gradient( 145deg, var(--rhnst-quote-card-start) 0%, #263cba 48%, var(--rhnst-quote-card-end) 100% ); content: ""; mix-blend-mode: var(--rhnst-quote-card-blend-mode); opacity: 0.94; pointer-events: none; } /* * Sehr feine helle Kontur für zusätzliche Tiefe. */ .rhnst-quote__card::after { position: absolute; inset: 0; z-index: 1; border: 1px solid rgb(255 255 255 / 12%); border-radius: inherit; content: ""; pointer-events: none; } /* * Inhalt über der Blend-Ebene */ .rhnst-quote__card > * { position: relative; z-index: 2; } /* * Signet */ .rhnst-quote__signet { display: block; width: clamp(3.5rem, 5vw, 4.75rem); height: auto; margin-bottom: clamp(2.5rem, 5vw, 4rem); } /* * Einleitende Überschrift */ .rhnst-quote__title { margin: 0; font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } /* * Das Zitat wird zum zentralen Gestaltungselement. */ .rhnst-quote__text { max-width: 61rem; margin: clamp(2.25rem, 4vw, 3.5rem) auto 0; font-size: clamp(2.1rem, 4.4vw, 4.25rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1.04; text-wrap: balance; } /* * Autor */ .rhnst-quote__footer { display: flex; flex-direction: column; align-items: center; margin-top: clamp(3.5rem, 7vw, 6rem); text-align: center; } .rhnst-quote__author { display: block; font-size: clamp(1.2rem, 2vw, 1.3rem); font-style: normal; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .rhnst-quote__role, .rhnst-quote__since { display: block; font-size: clamp(.8rem, 1.6vw, .9rem); font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; } .rhnst-quote__role { margin-top: 0.75rem; } .rhnst-quote__since { margin-top: 0.25rem; opacity: 0.72; } /* ========================================================= ZITAT – RESPONSIVE ========================================================== */ @media (max-width: 48rem) { .rhnst-quote__text { font-size: clamp(1.55rem, 6.2vw, 2rem); line-height: 1.1; } } /* ========================================================= LEISTUNGEN ========================================================== */ .rhnst-services { --rhnst-services-border: #cdd1dc; --rhnst-services-text: #111722; --rhnst-services-muted: #3e4652; --rhnst-services-active: #1c2972; --rhnst-services-open-background: #eef1ff; padding-block: var(--rhnst-section-space); scroll-margin-top: var(--rhnst-header-height); } /* ========================================================= EINLEITUNG ========================================================== */ .rhnst-services__header { max-width: 53rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .rhnst-services__eyebrow { position: relative; margin: 0 0 1.5rem; color: #686e78; font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: 0.02em; } .rhnst-services__eyebrow::before { position: absolute; top: 50%; right: calc(100% + 1.75rem); width: clamp(2rem, 5vw, 4rem); height: 3px; background: var(--rhnst-services-border); content: ""; transform: translateY(-50%); } .rhnst-services__title { margin: 0; color: var(--rhnst-color-blue, #3d59ff); font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; } .rhnst-services__intro { max-width: 48rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; color: var(--rhnst-services-text); font-size: clamp(1.1rem, 1.8vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; } /* ========================================================= LEISTUNGSSPALTEN ========================================================== */ .rhnst-services__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rhnst-services-border); } .rhnst-services__column { --rhnst-services-column-padding: clamp(2.5rem, 5vw, 4.5rem); min-width: 0; padding: var(--rhnst-services-column-padding); } .rhnst-services__column + .rhnst-services__column { border-left: 1px solid var(--rhnst-services-border); } .rhnst-services__column-header { min-height: clamp(16rem, 21vw, 19rem); } .rhnst-services__column-title { margin: 0; color: var(--rhnst-services-text); font-size: clamp(1.55rem, 2.6vw, 2.15rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; } .rhnst-services__column-intro { max-width: 35rem; margin: 1.5rem 0 0; color: var(--rhnst-services-muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.6; } /* ========================================================= LEISTUNGSLISTEN ========================================================== */ .rhnst-services__list { margin-inline: calc( var(--rhnst-services-column-padding) * -1 ); border-top: 1px solid var(--rhnst-services-border); } .rhnst-service-item { margin: 0; border-bottom: 1px solid var(--rhnst-services-border); background: transparent; transition: background-color var(--rhnst-transition-base, 280ms ease); } /* * Vollständig anklickbare Zeile */ .rhnst-service-item__summary { display: grid; grid-template-columns: calc(var(--rhnst-services-column-padding) + 0.5rem) minmax(0, 1fr); align-items: center; column-gap: 1.25rem; min-height: 4.75rem; padding: 1.1rem var(--rhnst-services-column-padding) 1.1rem 0; color: var(--rhnst-services-text); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.4; cursor: pointer; list-style: none; transition: color var(--rhnst-transition-fast, 180ms ease), background-color var(--rhnst-transition-fast, 180ms ease); } .rhnst-service-item__summary::-webkit-details-marker { display: none; } .rhnst-service-item__summary::marker { content: ""; } .rhnst-service-item__label { display: block; max-width: 33rem; text-wrap: pretty; } /* ========================================================= LINIE UND PLUS ========================================================== */ .rhnst-service-item__marker { position: relative; display: block; width: 100%; height: 1.5rem; } /* * Horizontale Linie */ .rhnst-service-item__marker::before { position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--rhnst-services-border); content: ""; transform: translateY(-50%); transition: background-color var(--rhnst-transition-base, 280ms ease); } /* * Plus am Ende der Linie */ .rhnst-service-item__plus { position: absolute; top: 50%; right: 0; width: 1.1rem; height: 1.1rem; color: var(--rhnst-services-active); transform: translate(50%, -50%); } .rhnst-service-item__plus::before, .rhnst-service-item__plus::after { position: absolute; top: 50%; left: 50%; background: currentColor; content: ""; transform: translate(-50%, -50%); } .rhnst-service-item__plus::before { width: 1rem; height: 0.12rem; } .rhnst-service-item__plus::after { width: 0.12rem; height: 1rem; transform-origin: center; transition: transform var(--rhnst-transition-base, 280ms ease), opacity var(--rhnst-transition-base, 280ms ease); } /* * Aus Plus wird Minus */ .rhnst-service-item[open] .rhnst-service-item__plus::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); } /* ========================================================= HOVER, FOKUS UND GEÖFFNETER ZUSTAND ========================================================== */ .rhnst-service-item__summary:hover { color: var(--rhnst-services-active); } .rhnst-service-item__summary:hover .rhnst-service-item__marker::before { background: var(--rhnst-services-active); } .rhnst-service-item__summary:focus-visible { outline: 0.2rem solid var(--rhnst-color-blue, #3d59ff); outline-offset: -0.2rem; } .rhnst-service-item[open] { background: var(--rhnst-services-open-background); } .rhnst-service-item[open] .rhnst-service-item__summary { color: var(--rhnst-services-active); } .rhnst-service-item[open] .rhnst-service-item__marker::before { background: var(--rhnst-services-active); } /* ========================================================= AUSGEKLAPPTER INHALT ========================================================== */ .rhnst-service-item__content { overflow: hidden; animation: rhnst-service-content-in 360ms var( --rhnst-reveal-easing, cubic-bezier(0.22, 1, 0.36, 1) ) both; } .rhnst-service-item__content p { max-width: 35rem; margin: 0; padding: 0 var(--rhnst-services-column-padding) 1.75rem calc( var(--rhnst-services-column-padding) + 1.75rem ); color: var(--rhnst-services-muted); font-size: clamp(1rem, 1.3vw, 1.1rem); font-weight: 400; letter-spacing: -0.005em; line-height: 1.65; } @keyframes rhnst-service-content-in { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= RESPONSIVE ========================================================== */ @media (max-width: 56rem) { .rhnst-services__grid { grid-template-columns: 1fr; } .rhnst-services__column + .rhnst-services__column { border-top: 1px solid var(--rhnst-services-border); border-left: 0; } .rhnst-services__column-header { min-height: 0; margin-bottom: 3rem; } } @media (max-width: 42rem) { .rhnst-services__column { --rhnst-services-column-padding: clamp(1.25rem, 6vw, 2rem); } .rhnst-services__eyebrow::before { display: none; } .rhnst-service-item__summary { grid-template-columns: calc(var(--rhnst-services-column-padding) + 0.25rem) minmax(0, 1fr); column-gap: 1rem; min-height: 4.35rem; font-size: 1rem; } .rhnst-service-item__content p { padding-right: var(--rhnst-services-column-padding); padding-left: calc( var(--rhnst-services-column-padding) + 1.25rem ); } } /* Animationen bei reduzierter Bewegung deaktivieren */ @media (prefers-reduced-motion: reduce) { .rhnst-service-item, .rhnst-service-item__summary, .rhnst-service-item__marker::before, .rhnst-service-item__plus::after, .rhnst-service-item__content { animation: none; transition: none; } } /* ========================================================= TEXTMARKER FÜR HEADLINES ========================================================== */ :root { --rhnst-marker-color: #f5f14c; } .rhnst-marker { --rhnst-marker-angle: -1.1deg; --rhnst-marker-start: 29%; --rhnst-marker-end: 86%; display: inline; padding-inline: 0.12em; background-image: linear-gradient( var(--rhnst-marker-angle), transparent 0%, transparent var(--rhnst-marker-start), var(--rhnst-marker-color) calc( var(--rhnst-marker-start) + 2% ), var(--rhnst-marker-color) var(--rhnst-marker-end), transparent calc( var(--rhnst-marker-end) + 2% ), transparent 100% ); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .rhnst-marker--blue-light { --rhnst-marker-color: #aebaff; } /* ========================================================= PROFIL ========================================================== */ .rhnst-profile { --rhnst-profile-background: #1c2972; --rhnst-profile-accent: #38d5ff; --rhnst-profile-accent-yellow: rgb(59, 208, 200); --rhnst-profile-text: #ffffff; --rhnst-profile-pattern-opacity: 0.46; position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(6rem, 11vw, 10rem); background: var(--rhnst-profile-background); color: var(--rhnst-profile-text); scroll-margin-top: var(--rhnst-header-height); } /* ========================================================= SEEKARTENLINIEN ========================================================== */ .rhnst-profile__pattern { position: absolute; inset: -4%; z-index: -1; display: block; width: 108%; height: 108%; object-fit: cover; object-position: center; opacity: var(--rhnst-profile-pattern-opacity); mix-blend-mode: multiply; pointer-events: none; user-select: none; opacity: .2 } /* ========================================================= INHALT ========================================================== */ .rhnst-profile__inner { position: relative; z-index: 1; } .rhnst-profile__title { max-width: 62rem; margin: 0; color: var(--rhnst-profile-accent-yellow); font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 700; letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; } .rhnst-profile__layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(20rem, 0.88fr); align-items: center; gap: clamp(4rem, 9vw, 9rem); margin-top: clamp(2.5rem, 5vw, 4rem); } /* ========================================================= TEXT ========================================================== */ .rhnst-profile__content { max-width: 43rem; } .rhnst-profile__lead { margin: 0 0 clamp(2rem, 4vw, 3.25rem); color: var(--rhnst-profile-text); font-size: clamp(1.3rem, 2.3vw, 1.8rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.25; } .rhnst-profile__text { color: rgb(255 255 255 / 94%); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; letter-spacing: -0.012em; line-height: 1.65; } .rhnst-profile__text p { margin: 0; } .rhnst-profile__text p + p { margin-top: 1.45em; } /* ========================================================= PORTRAIT ========================================================== */ .rhnst-profile__portrait { position: relative; justify-self: end; width: min(100%, 31rem); aspect-ratio: 1 / 1.05; margin: 0; overflow: hidden; border-radius: var(--rhnst-radius-medium, 0.5rem); background: none; box-shadow: 0 2.5rem 6rem rgb(5 12 43 / 30%); } .rhnst-profile__portrait-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-profile__portrait:hover .rhnst-profile__portrait-image { transform: scale(1.025); } /* * Verlauf für den Namen */ .rhnst-profile__portrait-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, transparent 42%, rgb(7 13 39 / 12%) 60%, rgb(7 13 39 / 88%) 100% ); pointer-events: none; } .rhnst-profile__portrait-caption { position: absolute; right: 1.5rem; bottom: clamp(1.5rem, 4vw, 2.5rem); left: 1.5rem; z-index: 2; color: var(--rhnst-profile-text); font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; text-align: center; } /* ========================================================= RESPONSIVE ========================================================== */ @media (max-width: 60rem) { .rhnst-profile__layout { grid-template-columns: 1fr; gap: clamp(3.5rem, 8vw, 6rem); } .rhnst-profile__content { max-width: 48rem; } .rhnst-profile__portrait { justify-self: start; width: min(100%, 36rem); } } @media (max-width: 42rem) { .rhnst-profile { --rhnst-profile-pattern-opacity: 0.34; padding-block: clamp(5rem, 18vw, 7rem); } .rhnst-profile__title { font-size: clamp(2.8rem, 13vw, 4.25rem); } .rhnst-profile__layout { margin-top: 2.5rem; } .rhnst-profile__text { font-size: 1rem; line-height: 1.65; } .rhnst-profile__portrait { aspect-ratio: 4 / 5; } } /* * Bewegung bei entsprechender Systemeinstellung reduzieren */ @media (prefers-reduced-motion: reduce) { .rhnst-profile__portrait-image { transition: none; } .rhnst-profile__portrait:hover .rhnst-profile__portrait-image { transform: none; } } /* ========================================================= PROJEKTE ========================================================== */ .rhnst-projects { --rhnst-projects-gap: clamp(0.75rem, 1.4vw, 1.4rem); --rhnst-projects-overlay: #1c2972; --rhnst-projects-text: #ffffff; --rhnst-projects-muted: rgb(255 255 255 / 78%); padding-block: var(--rhnst-section-space, clamp(6rem, 10vw, 10rem)); background: #ffffff; scroll-margin-top: var(--rhnst-header-height, 7rem); } /* Überschrift ========================================================== */ .rhnst-projects__header { max-width: 62rem; margin-bottom: clamp(3rem, 6vw, 5rem); } .rhnst-projects__eyebrow { position: relative; margin: 0 0 1.5rem; color: var(--rhnst-color-navy, #1c2972); font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .rhnst-projects__eyebrow::before { position: absolute; top: 50%; right: calc(100% + 1.75rem); width: clamp(2rem, 5vw, 4rem); height: 3px; background: rgb(28 41 114 / 35%); content: ""; transform: translateY(-50%); } .rhnst-projects__title { margin: 0; color: var(--rhnst-color-blue, #3855ff); font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; text-wrap: balance; } /* Projektgrid ========================================================== */ .rhnst-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rhnst-projects-gap); } .rhnst-project-card { min-width: 0; margin: 0; } .rhnst-project-card__link { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 4; overflow: hidden; border-radius: var(--rhnst-radius-medium, 0.35rem); background: var(--rhnst-color-navy, #1c2972); color: var(--rhnst-projects-text); text-decoration: none; box-shadow: 0 0 0 rgb(9 15 50 / 0%); transition: box-shadow 450ms ease, transform 450ms cubic-bezier(0.22, 1, 0.36, 1); } /* Projektbild ========================================================== */ .rhnst-project-card__image { position: absolute; inset: 0; z-index: -3; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.001); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms ease; } /* Transparenter blauer Farb-Layer */ .rhnst-project-card__color { position: absolute; inset: 0; z-index: -2; background: var(--rhnst-projects-overlay); mix-blend-mode: multiply; opacity: 0.18; pointer-events: none; transition: opacity 600ms ease; } /* Zusätzlicher Verlauf für dauerhaft lesbaren Text */ .rhnst-project-card__gradient { position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgb(8 13 43 / 88%) 0%, rgb(8 13 43 / 42%) 42%, rgb(8 13 43 / 4%) 76% ); pointer-events: none; transition: opacity 500ms ease; } /* Inhalt ========================================================== */ .rhnst-project-card__content { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; padding: clamp(1.35rem, 2.5vw, 2.25rem); transform: translateY(0); transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-project-card__collaboration { margin: 0 0 0.7rem; color: var(--rhnst-projects-muted); font-size: clamp(0.68rem, 0.85vw, 0.78rem); font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; } .rhnst-project-card__title { max-width: 18ch; margin: 0; color: var(--rhnst-projects-text); font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; } .rhnst-project-card__disciplines { max-width: 32ch; margin: 0.75rem 0 0; color: var(--rhnst-projects-muted); font-size: clamp(0.8rem, 1vw, 0.95rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.45; text-wrap: pretty; } /* Pfeil ========================================================== */ .rhnst-project-card__arrow { position: absolute; top: clamp(1rem, 2vw, 1.5rem); right: clamp(1rem, 2vw, 1.5rem); z-index: 3; display: grid; width: clamp(2.75rem, 4vw, 3.5rem); aspect-ratio: 1; place-items: center; border: 1px solid rgb(255 255 255 / 48%); border-radius: 50%; background: rgb(255 255 255 / 10%); color: #ffffff; -webkit-backdrop-filter: blur(0.5rem); backdrop-filter: blur(0.5rem); transform: translate(-0.35rem, 0.35rem); opacity: 0.8; transition: background-color 300ms ease, border-color 300ms ease, opacity 300ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-project-card__arrow svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } /* Hover und Tastaturfokus ========================================================== */ .rhnst-project-card__link:hover, .rhnst-project-card__link:focus-visible { box-shadow: 0 1.75rem 4rem rgb(9 15 50 / 20%); transform: translateY(-0.35rem); } .rhnst-project-card__link:hover .rhnst-project-card__image, .rhnst-project-card__link:focus-visible .rhnst-project-card__image { transform: scale(1.065); } .rhnst-project-card__link:hover .rhnst-project-card__color, .rhnst-project-card__link:focus-visible .rhnst-project-card__color { opacity: 0.58; } .rhnst-project-card__link:hover .rhnst-project-card__content, .rhnst-project-card__link:focus-visible .rhnst-project-card__content { transform: translateY(-0.35rem); } .rhnst-project-card__link:hover .rhnst-project-card__arrow, .rhnst-project-card__link:focus-visible .rhnst-project-card__arrow { border-color: #ffffff; background: #ffffff; color: var(--rhnst-color-navy, #1c2972); opacity: 1; transform: translate(0, 0); } .rhnst-project-card__link:focus-visible { outline: 3px solid var(--rhnst-color-blue, #3855ff); outline-offset: 0.3rem; } /* Link zu allen Projekten ========================================================== */ .rhnst-projects__footer { display: flex; justify-content: flex-end; margin-top: clamp(2.5rem, 5vw, 4rem); } .rhnst-projects__all { display: inline-flex; align-items: center; gap: 1.5rem; color: var(--rhnst-color-navy, #1c2972); font-size: clamp(1rem, 1.3vw, 1.15rem); font-weight: 700; line-height: 1.2; text-decoration: none; } .rhnst-projects__all svg { width: 3.75rem; height: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-projects__all:hover svg, .rhnst-projects__all:focus-visible svg { transform: translateX(0.45rem); } .rhnst-projects__all:focus-visible { outline: 3px solid var(--rhnst-color-blue, #3855ff); outline-offset: 0.4rem; } /* Tablet ========================================================== */ @media (max-width: 62rem) { .rhnst-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rhnst-project-card__link { aspect-ratio: 4 / 3; } } /* Smartphone ========================================================== */ @media (max-width: 42rem) { .rhnst-projects__grid { grid-template-columns: 1fr; gap: 1rem; } .rhnst-project-card__link { aspect-ratio: 4 / 3; } .rhnst-project-card__color { opacity: 0.24; } .rhnst-project-card__arrow { opacity: 1; transform: none; } .rhnst-projects__footer { justify-content: flex-start; } } /* Bewegungen reduzieren ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-project-card__link, .rhnst-project-card__image, .rhnst-project-card__color, .rhnst-project-card__content, .rhnst-project-card__arrow, .rhnst-projects__all svg { transition: none; } .rhnst-project-card__link:hover, .rhnst-project-card__link:focus-visible { transform: none; } } /* ========================================================= KUNDENSTIMMEN ========================================================== */ .rhnst-testimonials { --rhnst-testimonials-section-start: #10194f; --rhnst-testimonials-section-end: #1c2972; --rhnst-testimonials-card-start: #243486; --rhnst-testimonials-card-middle: #2c42b8; --rhnst-testimonials-card-end: #3d59ff; --rhnst-testimonials-accent: #38d5ff; --rhnst-testimonials-yellow: #f5f14c; --rhnst-testimonials-text: #ffffff; --rhnst-testimonials-muted: rgb(255 255 255 / 80%); --rhnst-testimonials-border: rgb(255 255 255 / 28%); /* * Breite einer einzelnen Kundenstimme. * Die Steuerung verwendet exakt dieselbe Breite. */ --rhnst-testimonials-slide-width: min(78vw, 72rem); position: relative; overflow: hidden; padding-block: var(--rhnst-section-space); background: linear-gradient( 160deg, var(--rhnst-testimonials-section-start) 0%, var(--rhnst-testimonials-section-end) 100% ); color: var(--rhnst-testimonials-text); } /* ========================================================= ÜBERSCHRIFT ========================================================== */ .rhnst-testimonials__header { max-width: 70rem; margin-bottom: clamp(3.5rem, 7vw, 6rem); } .rhnst-testimonials__eyebrow { position: relative; margin: 0 0 1.5rem; color: var(--rhnst-testimonials-accent); font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .rhnst-testimonials__eyebrow::before { position: absolute; top: 50%; right: calc(100% + 1.75rem); width: clamp(2rem, 5vw, 4rem); height: 1px; background: rgb(255 255 255 / 35%); content: ""; transform: translateY(-50%); } .rhnst-testimonials__title { max-width: 65rem; margin: 0; color: var(--rhnst-testimonials-text); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 700; letter-spacing: -0.055em; line-height: 1; text-wrap: balance; } .rhnst-testimonials__title .rhnst-marker { --rhnst-marker-color: var(--rhnst-testimonials-yellow); color: var(--rhnst-testimonials-section-start); } /* ========================================================= SLIDER ========================================================== */ .rhnst-testimonials__viewport { width: 100%; overflow: hidden; } .rhnst-testimonials__slider { margin-inline: auto; overflow: visible; } .rhnst-testimonials__slider .swiper-wrapper { align-items: stretch; } /* * Fallback ohne JavaScript: * Es wird nur die erste Stimme gezeigt. */ .rhnst-testimonials:not(.rhnst-testimonials--initialized) .rhnst-testimonial:not(:first-child) { display: none; } .rhnst-testimonials:not(.rhnst-testimonials--initialized) .rhnst-testimonials__controls-wrapper { display: none; } /* ========================================================= SLIDES ========================================================== */ .rhnst-testimonial { width: var(--rhnst-testimonials-slide-width); height: auto; opacity: 0.28; transform: scale(0.97); transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-testimonial.swiper-slide-prev, .rhnst-testimonial.swiper-slide-next { opacity: 0.6; } .rhnst-testimonial.swiper-slide-active { opacity: 1; transform: scale(1); } /* ========================================================= TESTIMONIALKARTE ========================================================== */ .rhnst-testimonial__card { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(27rem, 38vw, 33rem); overflow: hidden; padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 7vw, 6rem); border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--rhnst-radius-medium, 0.5rem); background: linear-gradient( 135deg, var(--rhnst-testimonials-card-start) 0%, var(--rhnst-testimonials-card-middle) 55%, var(--rhnst-testimonials-card-end) 100% ); box-shadow: 0 2.5rem 6rem rgb(3 7 30 / 28%); } /* * Dezenter Lichtschein */ .rhnst-testimonial__card::before { position: absolute; inset: 0; z-index: -1; background: radial-gradient( circle at 10% 0%, rgb(56 213 255 / 17%) 0%, transparent 42% ); content: ""; pointer-events: none; } /* ========================================================= ZITAT ========================================================== */ .rhnst-testimonial__quote { width: 100%; margin: 0; } .rhnst-testimonial__quote-mark { display: block; height: 0.55em; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); color: var(--rhnst-testimonials-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(4.5rem, 7vw, 6.5rem); font-weight: 700; line-height: 0.8; } .rhnst-testimonial__text { max-width: 32ch; margin: 0; color: var(--rhnst-testimonials-text); font-size: clamp(1.55rem, 2.5vw, 2.35rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.16; text-wrap: pretty; } /* ========================================================= AUTOR UND PORTRAIT ========================================================== */ .rhnst-testimonial__author { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.5rem, 5vw, 4rem); } .rhnst-testimonial__portrait { flex: 0 0 auto; width: clamp(6rem, 10vw, 11rem); aspect-ratio: 1; margin: 0; overflow: hidden; border: 2px solid rgb(255 255 255 / 45%); border-radius: 50%; background: rgb(255 255 255 / 15%); box-shadow: 0 0.75rem 2rem rgb(3 8 40 / 24%); } .rhnst-testimonial__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .rhnst-testimonial__author-info { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 0.25rem; width: 100%; } .rhnst-testimonial__name, .rhnst-testimonial__position, .rhnst-testimonial__company { display: block; min-width: 0; } .rhnst-testimonial__name { color: var(--rhnst-testimonials-text); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-style: normal; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; } .rhnst-testimonial__position { color: var(--rhnst-testimonials-muted); font-size: clamp(0.88rem, 1.2vw, 1rem); font-weight: 500; line-height: 1.4; } .rhnst-testimonial__company { margin-top: 0.2rem; } /* ========================================================= STEUERUNG ========================================================== */ .rhnst-testimonials__controls { display: grid; grid-template-columns: auto minmax(4rem, 1fr) auto; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); width: min( 100%, var(--rhnst-testimonials-slide-width) ); margin-top: clamp(2rem, 4vw, 3rem); } /* * Zähler */ .rhnst-testimonials__counter { display: flex; align-items: center; gap: 0.35rem; min-width: 4.75rem; color: var(--rhnst-testimonials-text); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.08em; } /* * Fortschrittslinie */ .rhnst-testimonials__progress { position: relative; height: 1px; overflow: hidden; background: var(--rhnst-testimonials-border); } .rhnst-testimonials__progress span { position: absolute; inset: 0; background: var(--rhnst-testimonials-accent); transform: scaleX(0); transform-origin: left center; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); } /* * Pfeile */ .rhnst-testimonials__navigation { display: flex; align-items: center; gap: 0.75rem; } .rhnst-testimonials__button { display: flex; align-items: center; justify-content: center; width: clamp(3rem, 4vw, 3.5rem); aspect-ratio: 1; padding: 0; border: 2px solid #fff; border-radius: 50%; background: transparent; color: var(--rhnst-testimonials-text); cursor: pointer; transition: background-color var(--rhnst-transition-base, 280ms ease), border-color var(--rhnst-transition-base, 280ms ease), color var(--rhnst-transition-base, 280ms ease), transform var(--rhnst-transition-fast, 180ms ease), opacity var(--rhnst-transition-fast, 180ms ease); } .rhnst-testimonials__button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .rhnst-testimonials__button:hover { border-color: var(--rhnst-testimonials-accent); background: var(--rhnst-testimonials-accent); color: var(--rhnst-testimonials-section-start); transform: scale(1.05); } .rhnst-testimonials__button:focus-visible { outline: 0.2rem solid var(--rhnst-testimonials-accent); outline-offset: 0.3rem; } .rhnst-testimonials__button.swiper-button-disabled { opacity: 0.3; pointer-events: none; cursor: default; } /* * Bei nur einer Stimme keine Steuerung anzeigen */ .rhnst-testimonials--single .rhnst-testimonials__controls-wrapper { display: none; } /* ========================================================= RESPONSIVE ========================================================== */ @media (max-width: 48rem) { .rhnst-testimonials { --rhnst-testimonials-slide-width: calc(100vw - 2.5rem); } .rhnst-testimonials__eyebrow::before { display: none; } .rhnst-testimonial__card { min-height: 0; padding: clamp(2.5rem, 9vw, 3.5rem) clamp(1.5rem, 7vw, 2.5rem); } .rhnst-testimonial__quote-mark { font-size: 4.5rem; } .rhnst-testimonial__text { max-width: none; font-size: clamp(1.3rem, 5.2vw, 1.65rem); line-height: 1.2; } .rhnst-testimonial__author { margin-top: 2.5rem; } .rhnst-testimonial__portrait { width: 4.75rem; } .rhnst-testimonials__controls { grid-template-columns: auto 1fr; } .rhnst-testimonials__progress { grid-column: 1 / -1; grid-row: 2; } .rhnst-testimonials__navigation { justify-self: end; } } /* ========================================================= BEWEGUNGEN REDUZIEREN ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-testimonial, .rhnst-testimonials__progress span, .rhnst-testimonials__button { transition: none; } .rhnst-testimonials__button:hover { transform: none; } } /* ========================================================= FOOTER / KONTAKT ========================================================== */ .rhnst-footer { --rhnst-footer-text: #111722; --rhnst-footer-muted: #4c5360; --rhnst-footer-border: #d8dbe3; --rhnst-footer-blue: var(--rhnst-color-blue, #3855ff); --rhnst-footer-navy: var(--rhnst-color-navy, #1c2972); position: relative; padding-top: clamp(6rem, 12vw, 11rem); background: #ffffff; color: var(--rhnst-footer-text); scroll-margin-top: var(--rhnst-header-height, 7rem); } .rhnst-footer__inner { display: flex; flex-direction: column; min-height: min(54rem, 92vh); } /* Hauptbereich ========================================================== */ .rhnst-footer__main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr); gap: clamp(5rem, 12vw, 12rem); padding-bottom: clamp(7rem, 14vw, 13rem); } .rhnst-footer__intro { max-width: 45rem; } .rhnst-footer__eyebrow { margin: 0 0 1.5rem; color: var(--rhnst-footer-navy); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; } .rhnst-footer__title { margin: 0; color: var(--rhnst-footer-blue); font-size: clamp(3rem, 6vw, 5.75rem); font-weight: 700; letter-spacing: -0.055em; line-height: 0.98; text-wrap: balance; } .rhnst-footer__text { max-width: 42rem; margin: clamp(2.25rem, 4vw, 3.5rem) 0 0; color: var(--rhnst-footer-text); font-size: clamp(1.1rem, 1.65vw, 1.35rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.42; text-wrap: pretty; } /* E-Mail-Schaltfläche ========================================================== */ .rhnst-footer__mail { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: min(100%, 22rem); margin-top: clamp(2.5rem, 5vw, 4rem); padding: 1.35rem 1.5rem 1.35rem 2rem; border: 2px solid var(--rhnst-footer-blue); border-radius: var(--rhnst-radius-small, 0); background: var(--rhnst-footer-blue); color: #ffffff; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease; } .rhnst-footer__mail-icon { flex: 0 0 auto; width: 3.75rem; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-footer__mail:hover { border-color: var(--rhnst-footer-navy); background: var(--rhnst-footer-navy); transform: translateY(-0.2rem); } .rhnst-footer__mail:hover .rhnst-footer__mail-icon { transform: translateX(0.45rem); } .rhnst-footer__mail:focus-visible { outline: 3px solid var(--rhnst-footer-navy); outline-offset: 0.3rem; } /* Kontaktdaten ========================================================== */ .rhnst-footer__contact { display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(2.5rem, 5vw, 4rem); margin: 0 0 0 auto; font-style: normal; } .rhnst-footer__contact-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; } .rhnst-footer__label { margin-bottom: 0.35rem; color: var(--rhnst-footer-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .rhnst-footer__contact-link { position: relative; color: var(--rhnst-footer-text); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 650; line-height: 1.35; text-decoration: none; } .rhnst-footer__contact-link::after { position: absolute; right: 0; bottom: -0.2rem; left: 0; height: 2px; background: var(--rhnst-footer-blue); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-footer__contact-link:hover::after, .rhnst-footer__contact-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .rhnst-footer__contact-link:focus-visible { outline: 2px solid var(--rhnst-footer-blue); outline-offset: 0.35rem; } .rhnst-footer__address { margin: 0; color: var(--rhnst-footer-muted); font-size: clamp(1rem, 1.35vw, 1.15rem); font-weight: 500; line-height: 1.55; } /* ========================================================= Footer – Kontaktaktionen ========================================================= */ .rhnst-footer__actions { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1rem, 2vw, 1.5rem); } /* LinkedIn-Button */ .rhnst-footer__linkedin { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: clamp(3.5rem, 5vw, 4.25rem); aspect-ratio: 1; color: var(--rhnst-color-blue); background-color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.12); text-decoration: none; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .rhnst-footer__linkedin svg { display: block; width: 42%; height: 42%; fill: currentColor; } .rhnst-footer__linkedin:hover { color: #fff; background-color: var(--rhnst-color-blue); border-color: var(--rhnst-color-blue); transform: translateY(-3px); box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18); } .rhnst-footer__linkedin:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; } /* Mobil: LinkedIn unter den Mail-Link */ @media (max-width: 700px) { .rhnst-footer__actions { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .rhnst-footer__linkedin { width: 3.5rem; } } .rhnst-footer__mail { align-self: center; height: auto; min-height: 0; padding-block: clamp(0.9rem, 1.5vw, 1.2rem); } @media (max-width: 700px) { .rhnst-footer__mail { align-self: flex-start; width: auto; height: auto; } } @media (min-width: 609px) and (max-width: 700px) { .rhnst-footer__actions { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 1.25rem; } .rhnst-footer__mail { display: inline-flex !important; flex: 0 0 auto; align-self: flex-start; width: auto; height: auto; min-height: 0; padding-block: 1rem; } .rhnst-footer__mail span { white-space: nowrap; } .rhnst-footer__linkedin { flex: 0 0 auto; width: 3.5rem; height: 3.5rem; aspect-ratio: 1; } } /* Unterer Footerbereich ========================================================== */ .rhnst-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: auto; padding-block: 1.75rem; border-top: 1px solid var(--rhnst-footer-border); padding-bottom: 100px; } .rhnst-footer__copyright { margin: 0; color: var(--rhnst-footer-text); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; } .rhnst-footer__legal-list { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); margin: 0; padding: 0; list-style: none; } .rhnst-footer__legal-list a { position: relative; display: inline-block; color: var(--rhnst-footer-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.4; text-decoration: none; transition: color 200ms ease; } .rhnst-footer__legal-list a::after { position: absolute; right: 0; bottom: -0.35rem; left: 0; height: 1px; background: var(--rhnst-footer-blue); content: ""; transform: scaleX(0); transform-origin: right center; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-footer__legal-list a:hover, .rhnst-footer__legal-list a:focus-visible { color: var(--rhnst-footer-navy); } .rhnst-footer__legal-list a:hover::after, .rhnst-footer__legal-list a:focus-visible::after { transform: scaleX(1); transform-origin: left center; } .rhnst-footer__legal-list a:focus-visible { outline: 2px solid var(--rhnst-footer-blue); outline-offset: 0.4rem; } /* Responsive ========================================================== */ @media (max-width: 56rem) { .rhnst-footer__inner { min-height: auto; } .rhnst-footer__main { grid-template-columns: 1fr; gap: 5rem; padding-bottom: clamp(5rem, 12vw, 8rem); } .rhnst-footer__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; width: 100%; margin: 0; } } @media (max-width: 38rem) { .rhnst-footer { padding-top: 5rem; } .rhnst-footer__title { font-size: clamp(2.8rem, 13vw, 4rem); } .rhnst-footer__title br { display: none; } .rhnst-footer__text { font-size: 1.05rem; } .rhnst-footer__mail { width: 100%; min-width: 0; padding-inline: 1.35rem; } .rhnst-footer__contact { grid-template-columns: 1fr; } .rhnst-footer__bottom { align-items: flex-start; flex-direction: column; gap: 1.25rem; } .rhnst-footer__legal-list { flex-wrap: wrap; } } /* Bewegungen reduzieren ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-footer__mail, .rhnst-footer__mail-icon, .rhnst-footer__contact-link::after, .rhnst-footer__legal-list a::after { transition: none; } .rhnst-footer__mail:hover { transform: none; } } /* ========================================================= KONTAKT-AKTIONEN ========================================================== */ .rhnst-footer__actions { --rhnst-footer-action-height: 4.75rem; display: flex; align-items: stretch; gap: 2.85rem; margin-top: clamp(2.5rem, 5vw, 4rem); } /* Bestehenden Abstand vom Mail-Link entfernen */ .rhnst-footer__actions .rhnst-footer__mail { flex: 0 1 22rem; min-height: var(--rhnst-footer-action-height); margin-top: 0; } /* LinkedIn */ .rhnst-footer__linkedin { display: grid; flex: 0 0 var(--rhnst-footer-action-height); width: var(--rhnst-footer-action-height); aspect-ratio: 1; place-items: center; border: 2px solid var(--rhnst-footer-navy, #1c2972); border-radius: 50%; background: transparent; color: var(--rhnst-footer-navy, #1c2972); text-decoration: none; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-footer__linkedin svg { width: 1.45rem; height: 1.45rem; fill: currentColor; transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-footer__linkedin:hover { border-color: var(--rhnst-footer-blue, #3855ff); background: var(--rhnst-footer-blue, #3855ff); color: #ffffff; transform: translateY(-0.2rem); } .rhnst-footer__linkedin:hover svg { transform: scale(1.08); } .rhnst-footer__linkedin:active { transform: scale(0.96); } .rhnst-footer__linkedin:focus-visible { outline: 3px solid var(--rhnst-footer-blue, #3855ff); outline-offset: 0.3rem; } /* Smartphone */ @media (max-width: 38rem) { .rhnst-footer__actions { width: 100%; } .rhnst-footer__actions .rhnst-footer__mail { flex: 1 1 auto; min-width: 0; } } /* Reduzierte Bewegung */ @media (prefers-reduced-motion: reduce) { .rhnst-footer__linkedin, .rhnst-footer__linkedin svg { transition: none; } .rhnst-footer__linkedin:hover { transform: none; } } @media (max-width: 700px) { .rhnst-footer__actions .rhnst-footer__mail { flex: 0 0 auto; width: auto; height: auto; } } /* ========================================================= SCROLL TO TOP ========================================================== */ .rhnst-scroll-top { position: fixed; left: max(var(--rhnst-page-gutter, 1.5rem), 1.25rem); bottom: calc(1.25rem + env(safe-area-inset-bottom)); z-index: 90; display: grid; width: clamp(3.25rem, 5vw, 4rem); aspect-ratio: 1; padding: 0; place-items: center; overflow: hidden; border: 0; border-radius: 50%; background: var(--rhnst-color-navy, #1c2972); color: #ffffff; box-shadow: 0 0.75rem 2.5rem rgb(8 15 55 / 22%); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(1rem) scale(0.9); visibility: hidden; transition: opacity 280ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1), visibility 280ms ease, background-color 220ms ease; } /* Erst nach dem Scrollen sichtbar */ body.rhnst-is-scrolled .rhnst-scroll-top { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); visibility: visible; } /* Fortschrittsring */ .rhnst-scroll-top__progress { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; transform: rotate(-90deg); } .rhnst-scroll-top__track, .rhnst-scroll-top__value { stroke-width: 1.5; } .rhnst-scroll-top__track { stroke: rgb(255 255 255 / 18%); } .rhnst-scroll-top__value { stroke: var(--rhnst-color-blue, #3d59ff); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset 100ms linear; } /* Pfeil */ .rhnst-scroll-top__arrow { position: relative; z-index: 1; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.75; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } /* Interaktion */ .rhnst-scroll-top:hover { background: var(--rhnst-color-blue, #3d59ff); transform: translateY(-0.2rem) scale(1); } .rhnst-scroll-top:hover .rhnst-scroll-top__arrow { transform: translateY(-0.2rem); } .rhnst-scroll-top:active { transform: translateY(0) scale(0.96); } .rhnst-scroll-top:focus-visible { outline: 3px solid var(--rhnst-color-blue, #3d59ff); outline-offset: 0.3rem; } /* Mobil etwas kompakter */ @media (max-width: 40rem) { .rhnst-scroll-top { left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); width: 3.25rem; } } /* Reduzierte Bewegung berücksichtigen */ @media (prefers-reduced-motion: reduce) { .rhnst-scroll-top, .rhnst-scroll-top__arrow, .rhnst-scroll-top__value { transition: none; } .rhnst-scroll-top:hover { transform: none; } } .rhnst-scroll-top { left: max(1.25rem, env(safe-area-inset-left)); right: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); width: 3.75rem; height: 3.75rem; padding: 1rem; border: 1px solid rgb(32 47 121 / 12%); border-radius: 50%; background: var(--rhnst-color-white); box-shadow: 0 0.4rem 1rem rgb(11 23 56 / 12%), 0 1rem 2.5rem rgb(11 23 56 / 18%); color: var(--rhnst-color-navy); } /* ========================================================= WARUM WERFT? ========================================================== */ .rhnst-werft { --rhnst-werft-background: #10194f; --rhnst-werft-background-end: #1c2972; --rhnst-werft-accent: #38d5ff; --rhnst-werft-text: #ffffff; --rhnst-werft-muted: rgb(255 255 255 / 72%); --rhnst-werft-border: rgb(255 255 255 / 20%); position: relative; isolation: isolate; padding-block: var( --rhnst-section-space, clamp(7rem, 12vw, 12rem) ); overflow: hidden; background: linear-gradient( 145deg, var(--rhnst-werft-background), var(--rhnst-werft-background-end) ); color: var(--rhnst-werft-text); } /* Hintergrund ========================================================== */ .rhnst-werft__background { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .rhnst-werft__background-word { position: absolute; top: 3%; left: -0.04em; color: transparent; font-size: clamp(11rem, 30vw, 34rem); font-weight: 800; letter-spacing: -0.08em; line-height: 0.8; white-space: nowrap; -webkit-text-stroke: 1px rgb(255 255 255 / 8%); text-stroke: 1px rgb(255 255 255 / 8%); will-change: transform; } /* ========================================================= ANIMIERTE RHEINLINIE ========================================================== */ .rhnst-werft__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .rhnst-werft__route-track, .rhnst-werft__route-value { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .rhnst-werft__route-track { stroke: rgb(255 255 255 / 10%); stroke-width: 1.25; } .rhnst-werft__route-value { stroke: url("#rhnst-werft-route-gradient"); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow( 0 0 0.5rem rgb(56 213 255 / 30%) ); will-change: stroke-dashoffset; } /* Inhalt ========================================================== */ .rhnst-werft__inner { position: relative; z-index: 2; } .rhnst-werft__eyebrow { position: relative; margin: 0 0 clamp(3rem, 6vw, 5rem); color: var(--rhnst-werft-accent); font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .rhnst-werft__eyebrow::before { position: absolute; top: 50%; right: calc(100% + 1.75rem); width: clamp(2rem, 5vw, 4rem); height: 3px; background: rgb(255 255 255 / 35%); content: ""; transform: translateY(-50%); } .rhnst-werft__main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr); align-items: start; gap: clamp(4rem, 10vw, 10rem); } .rhnst-werft__title { max-width: 11ch; margin: 0; color: var(--rhnst-werft-text); font-size: clamp(3.5rem, 7vw, 7.5rem); font-weight: 700; letter-spacing: -0.065em; line-height: 0.94; text-wrap: balance; } .rhnst-werft .rhnst-marker { --rhnst-marker-color: #f5f14c; color: var(--rhnst-werft-background); } .rhnst-werft__copy { max-width: 38rem; padding-top: 0.5rem; } .rhnst-werft__copy p { margin: 0; color: var(--rhnst-werft-muted); font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 500; line-height: 1.6; text-wrap: pretty; } .rhnst-werft__copy p + p { margin-top: 1.5rem; } .rhnst-werft__copy .rhnst-werft__lead { color: var(--rhnst-werft-text); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.4; } @media screen and (max-width: 1000px) { .rhnst-werft__route { opacity: .1; } } /* Grundsätze ========================================================== */ .rhnst-werft__principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(6rem, 12vw, 11rem) 0 0; padding: 0; border-top: 1px solid var(--rhnst-werft-border); list-style: none; } .rhnst-werft__principle { position: relative; min-width: 0; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem) 0 0; } .rhnst-werft__principle + .rhnst-werft__principle { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--rhnst-werft-border); } .rhnst-werft__number { display: block; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); color: var(--rhnst-werft-accent); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; } .rhnst-werft__principle h3 { margin: 0; color: var(--rhnst-werft-text); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; } .rhnst-werft__principle p { max-width: 25ch; margin: 0.85rem 0 0; color: var(--rhnst-werft-muted); font-size: clamp(0.95rem, 1.25vw, 1.08rem); font-weight: 500; line-height: 1.5; } /* Responsive ========================================================== */ @media (max-width: 60rem) { .rhnst-werft__main { grid-template-columns: 1fr; gap: 4rem; } .rhnst-werft__title { max-width: 13ch; } .rhnst-werft__copy { max-width: 44rem; margin-left: auto; } .rhnst-werft__principles { grid-template-columns: 1fr; } .rhnst-werft__principle { padding: 2rem 0; } .rhnst-werft__principle + .rhnst-werft__principle { padding-left: 0; border-top: 1px solid var(--rhnst-werft-border); border-left: 0; } .rhnst-werft__number { margin-bottom: 1rem; } } @media (max-width: 40rem) { .rhnst-werft__title { font-size: clamp(3rem, 14vw, 4.5rem); } .rhnst-werft__background-word { top: 8%; font-size: 42vw; } } /* Bewegungen reduzieren ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-werft__route-value { stroke-dashoffset: 0; transition: none; } .rhnst-werft__background-word { transform: none !important; } } /* ========================================================= RHEINSEITE IN ZAHLEN ========================================================== */ .rhnst-facts { --rhnst-facts-background: #f4f7f5; --rhnst-facts-text: #111722; --rhnst-facts-navy: var(--rhnst-color-navy, #1c2972); --rhnst-facts-blue: var(--rhnst-color-blue, #3855ff); --rhnst-facts-green: #78f29a; --rhnst-facts-muted: #3f4855; --rhnst-facts-border: #cbd3d0; position: relative; padding-block: var( --rhnst-section-space, clamp(6rem, 11vw, 10rem) ); overflow: hidden; background: var(--rhnst-facts-background); color: var(--rhnst-facts-text); } /* ========================================================= ÜBERSCHRIFT ========================================================== */ .rhnst-facts__header { max-width: 62rem; margin-bottom: clamp(4rem, 7vw, 6.5rem); } .rhnst-facts__eyebrow { position: relative; margin: 0 0 1.5rem; color: var(--rhnst-facts-navy); font-size: clamp(0.95rem, 1.3vw, 1.1rem); font-weight: 750; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } .rhnst-facts__eyebrow::before { position: absolute; top: 50%; right: calc(100% + 1.75rem); width: clamp(2rem, 5vw, 4rem); height: 1px; background: var(--rhnst-facts-green); content: ""; transform: translateY(-50%); } .rhnst-facts__title { margin: 0; color: var(--rhnst-facts-blue); font-size: clamp(3rem, 6vw, 6rem); font-weight: 700; letter-spacing: -0.06em; line-height: 0.98; text-wrap: balance; } /* Moderner grüner Marker */ .rhnst-facts .rhnst-marker { --rhnst-marker-color: var(--rhnst-facts-green); display: inline; padding-inline: 0.08em; background-image: linear-gradient( -1.1deg, transparent 0%, transparent 46%, var(--rhnst-facts-green) 48%, var(--rhnst-facts-green) 89%, transparent 91%, transparent 100% ); color: var(--rhnst-facts-navy); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ========================================================= FAKTEN-GRID ========================================================== */ .rhnst-facts__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin: 0; padding: 0; border-top: 1px solid var(--rhnst-facts-border); border-bottom: 1px solid var(--rhnst-facts-border); list-style: none; } /* * Eine einzige grüne Linie für das gesamte Grid. * Dadurch liegt sie überall exakt auf derselben Höhe. */ .rhnst-facts__grid::after { position: absolute; right: 0; bottom: -1px; left: 0; z-index: 2; height: 3px; background: var(--rhnst-facts-green); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1); } .rhnst-facts--counting .rhnst-facts__grid::after, .rhnst-facts--counted .rhnst-facts__grid::after { transform: scaleX(1); } /* ========================================================= EINZELNE FAKTEN ========================================================== */ .rhnst-fact { display: grid; grid-template-rows: 2rem minmax(8rem, 1fr) 6.75rem; min-width: 0; min-height: clamp(20rem, 25vw, 24rem); padding: clamp(2rem, 3vw, 3rem) clamp(1.75rem, 2.6vw, 2.75rem); overflow: hidden; } .rhnst-fact + .rhnst-fact { border-left: 1px solid var(--rhnst-facts-border); } /* * Die erste Kachel beginnt direkt an der linken Außenlinie. */ .rhnst-fact:first-child { padding-left: 0; } /* ========================================================= BEZEICHNUNGEN ========================================================== */ .rhnst-fact__prefix { align-self: start; display: block; margin: 0; color: var(--rhnst-facts-navy); font-size: clamp(1rem, 1.25vw, 1.2rem); font-weight: 750; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } /* ========================================================= ZAHLEN ========================================================== */ .rhnst-fact__value { align-self: end; display: block; max-width: 100%; margin: 0; padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); color: var(--rhnst-facts-blue); font-size: clamp(4rem, 4.8vw, 6.5rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -0.065em; line-height: 0.8; white-space: nowrap; } /* ========================================================= BESCHREIBUNGEN ========================================================== */ .rhnst-fact__text { align-self: start; max-width: 22ch; margin: 0; color: var(--rhnst-facts-text); font-size: clamp(1rem, 1.2vw, 1.12rem); font-weight: 650; letter-spacing: -0.018em; line-height: 1.45; text-wrap: pretty; } /* ========================================================= NUR FÜR SCREENREADER ========================================================== */ .rhnst-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; } /* ========================================================= TABLET: ZWEI SPALTEN ========================================================== */ @media (max-width: 68rem) { .rhnst-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rhnst-fact { min-height: 22rem; } .rhnst-fact + .rhnst-fact { border-left: 0; } .rhnst-fact:nth-child(even) { border-left: 1px solid var(--rhnst-facts-border); } .rhnst-fact:nth-child(n + 3) { border-top: 1px solid var(--rhnst-facts-border); } .rhnst-fact:nth-child(odd) { padding-left: 0; } .rhnst-fact__value { font-size: clamp(4.75rem, 10vw, 7rem); } } /* ========================================================= SMARTPHONE: EINE SPALTE ========================================================== */ @media (max-width: 40rem) { .rhnst-facts { padding-block: clamp(5rem, 18vw, 7rem); } .rhnst-facts__header { margin-bottom: 3.5rem; } .rhnst-facts__title { font-size: clamp(2.9rem, 13vw, 4.25rem); } .rhnst-facts__grid { grid-template-columns: 1fr; } .rhnst-fact { grid-template-rows: auto auto auto; min-height: 0; padding: 2rem 0; } .rhnst-fact + .rhnst-fact, .rhnst-fact:nth-child(even) { border-left: 0; } .rhnst-fact:nth-child(n + 2) { border-top: 1px solid var(--rhnst-facts-border); } .rhnst-fact__value { margin-top: 3rem; padding-bottom: 1.5rem; font-size: clamp(4.75rem, 21vw, 6.5rem); } .rhnst-fact__text { max-width: 26ch; } } .rhnst-marker-font-color-yellow { color: #78f29a } /* ========================================================= BEWEGUNGEN REDUZIEREN ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-facts__grid::after { transform: scaleX(1); transition: none; } } /* ========================================================= PROJEKTDETAIL Projektinformationen links, flexible Galerie rechts. ========================================================== */ .rhnst-project-detail { --rhnst-project-color: var( --rhnst-color-blue, #1c2972 ); --rhnst-project-text: var( --rhnst-color-text, #3c3c3b ); --rhnst-project-muted: rgba(60, 60, 59, 0.66); --rhnst-project-line: rgba(28, 41, 114, 0.16); --rhnst-project-surface: #f5f5f2; position: relative; overflow: clip; padding-block: clamp(9rem, 13vw, 13rem) clamp(6rem, 10vw, 10rem); background: #fff; color: var(--rhnst-project-text); } /* ========================================================= HAUPTLAYOUT ========================================================== */ .rhnst-project-detail__inner { display: grid; grid-template-columns: minmax(16rem, 0.32fr) minmax(0, 0.68fr); align-items: start; gap: clamp(3rem, 7vw, 9rem); } /* ========================================================= LINKE INFORMATIONSSPALTE ========================================================== */ .rhnst-project-detail__information { position: sticky; top: calc( var(--rhnst-header-height, 6rem) + clamp(1.5rem, 3vw, 3rem) ); align-self: start; min-width: 0; } .rhnst-project-detail__eyebrow { display: flex; align-items: center; gap: 0.85rem; margin: 0 0 clamp(1.5rem, 2.5vw, 2.5rem); color: var(--rhnst-project-color); font-size: clamp(0.72rem, 0.9vw, 0.82rem); font-weight: 700; letter-spacing: 0.13em; line-height: 1.2; text-transform: uppercase; } .rhnst-project-detail__eyebrow::before { flex: 0 0 2.5rem; width: 2.5rem; height: 1px; background: currentColor; content: ""; } .rhnst-project-detail__title { width: 100%; max-width: none; margin: 0; color: var(--rhnst-project-color); font-size: clamp(2.5rem, 3.5vw, 4.25rem); font-weight: 700; letter-spacing: -0.045em; line-height: 0.98; hyphens: manual; overflow-wrap: normal; text-wrap: balance; word-break: normal; } .rhnst-project-detail__client { max-width: 32rem; margin: clamp(2.2rem, 4vw, 4rem) 0 0; color: var(--rhnst-project-color); font-size: clamp(1.08rem, 1.55vw, 1.35rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.4; } .rhnst-project-detail__intro { max-width: 34rem; margin: clamp(1.6rem, 2.8vw, 2.8rem) 0 0; color: var(--rhnst-project-text); font-size: clamp(1.05rem, 1.4vw, 1.22rem); font-weight: 500; letter-spacing: -0.012em; line-height: 1.6; } .rhnst-project-detail__text { max-width: 34rem; margin: 1.25rem 0 0; color: var(--rhnst-project-muted); font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.7; } .rhnst-project-detail__text + .rhnst-project-detail__text { margin-top: 1rem; } /* ========================================================= LEISTUNGEN ========================================================== */ .rhnst-project-detail__services { max-width: 34rem; margin-top: clamp(2.75rem, 5vw, 5rem); padding-top: clamp(1.5rem, 2.5vw, 2.25rem); border-top: 1px solid var(--rhnst-project-line); } .rhnst-project-detail__subtitle { margin: 0 0 1.25rem; color: var(--rhnst-project-color); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.13em; line-height: 1.2; text-transform: uppercase; } .rhnst-project-detail__service-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; } .rhnst-project-detail__service-list li { position: relative; margin: 0; padding-left: 1.25rem; color: var(--rhnst-project-text); font-size: clamp(0.93rem, 1.05vw, 1rem); line-height: 1.45; } .rhnst-project-detail__service-list li::before { position: absolute; top: 0.7em; left: 0; width: 0.55rem; height: 1px; background: var(--rhnst-project-color); content: ""; } /* ========================================================= PROJEKTJAHR ========================================================== */ .rhnst-project-detail__year { display: flex; align-items: baseline; gap: 0.75rem; max-width: 34rem; margin: 2rem 0 0; color: var(--rhnst-project-text); font-size: 0.95rem; line-height: 1.4; } .rhnst-project-detail__year span { color: var(--rhnst-project-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } /* ========================================================= EXTERNER PROJEKTLINK ========================================================== */ .rhnst-project-detail__external-link { display: inline-flex; align-items: center; gap: 1rem; margin-top: clamp(2rem, 3vw, 3rem); padding-bottom: 0.5rem; border-bottom: 1px solid currentColor; color: var(--rhnst-project-color); font-size: clamp(0.95rem, 1.1vw, 1.05rem); font-weight: 700; line-height: 1.2; text-decoration: none; transition: color 180ms ease, gap 180ms ease; } .rhnst-project-detail__external-link svg { flex: 0 0 1.55rem; width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } .rhnst-project-detail__external-link:hover { gap: 1.4rem; } .rhnst-project-detail__external-link:focus-visible { outline: 2px solid var(--rhnst-project-color); outline-offset: 0.45rem; } /* ========================================================= PROJEKTGALERIE ========================================================== */ .rhnst-project-detail__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 2vw, 2rem); min-width: 0; } .rhnst-project-detail__figure { min-width: 0; margin: 0; } .rhnst-project-detail__figure--full { grid-column: 1 / -1; } .rhnst-project-detail__figure--half { grid-column: span 1; } .rhnst-project-detail__figure--portrait { grid-column: span 1; } .rhnst-project-detail__image { display: block; width: 100%; height: auto; background: var(--rhnst-project-surface); } .rhnst-project-detail__figure figcaption { margin-top: 0.75rem; color: var(--rhnst-project-muted); font-size: clamp(0.76rem, 0.9vw, 0.86rem); line-height: 1.45; } /* Dezente Abwechslung bei Hochformaten */ .rhnst-project-detail__figure--portrait:nth-child(even) { margin-top: clamp(2rem, 6vw, 7rem); } /* ========================================================= PROJEKTNAVIGATION ========================================================== */ .rhnst-project-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(6rem, 11vw, 12rem); border-top: 1px solid var(--rhnst-project-line); border-bottom: 1px solid var(--rhnst-project-line); } .rhnst-project-navigation__link { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: clamp(10rem, 16vw, 15rem); padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 4vw, 4rem); color: var(--rhnst-project-color); text-decoration: none; transition: background-color 220ms ease, color 220ms ease; } .rhnst-project-navigation__link--previous { align-items: flex-start; padding-left: clamp(3.5rem, 6vw, 6rem); border-right: 1px solid var(--rhnst-project-line); text-align: left; } .rhnst-project-navigation__link--next { align-items: flex-end; padding-right: clamp(3.5rem, 6vw, 6rem); text-align: right; } .rhnst-project-navigation__link::before { position: absolute; top: 50%; font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 300; line-height: 1; transform: translateY(-50%); transition: transform 220ms ease; } .rhnst-project-navigation__link--previous::before { left: clamp(1rem, 2vw, 2rem); content: "←"; } .rhnst-project-navigation__link--next::before { right: clamp(1rem, 2vw, 2rem); content: "→"; } .rhnst-project-navigation__direction { margin-bottom: 0.75rem; color: var(--rhnst-project-muted); font-size: clamp(0.68rem, 0.85vw, 0.78rem); font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; transition: color 220ms ease; } .rhnst-project-navigation__link strong { max-width: 18ch; font-size: clamp(1.35rem, 2.4vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; } .rhnst-project-navigation__link:hover { background: var(--rhnst-project-color); color: #fff; } .rhnst-project-navigation__link:hover .rhnst-project-navigation__direction { color: rgba(255, 255, 255, 0.68); } .rhnst-project-navigation__link--previous:hover::before { transform: translate(-0.35rem, -50%); } .rhnst-project-navigation__link--next:hover::before { transform: translate(0.35rem, -50%); } .rhnst-project-navigation__link:focus-visible { z-index: 1; outline: 2px solid var(--rhnst-project-color); outline-offset: 0.35rem; } /* ========================================================= PROJEKTBETEILIGTE ========================================================= */ .rhnst-project-detail__credits { margin-top: clamp(2rem, 4vw, 3.5rem); } .rhnst-project-detail__credits-title { margin: 0 0 1rem; color: var(--rhnst-project-color); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; } .rhnst-project-detail__credits-list { display: grid; margin: 0; padding: 0; border-top: 1px solid rgba(28, 41, 114, 0.18); list-style: none; } .rhnst-project-detail__credit { display: grid; gap: 0.25rem; padding: 0.85rem 0; border-bottom: 1px solid rgba(28, 41, 114, 0.18); } .rhnst-project-detail__credit-label { color: rgba(28, 41, 114, 0.65); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; } .rhnst-project-detail__credit-name, .rhnst-project-detail__credit-link { color: var(--rhnst-project-color); font-size: 0.95rem; font-weight: 700; line-height: 1.4; } .rhnst-project-detail__credit-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; text-decoration: none; } .rhnst-project-detail__credit-link::after { content: "↗"; flex: 0 0 auto; font-size: 0.9em; transition: transform 180ms ease; } .rhnst-project-detail__credit-link:hover, .rhnst-project-detail__credit-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .rhnst-project-detail__credit-link:hover::after, .rhnst-project-detail__credit-link:focus-visible::after { transform: translate(0.15rem, -0.15rem); } /* ========================================================= TABLET ========================================================== */ @media (max-width: 1000px) { .rhnst-project-detail { padding-top: clamp(8rem, 16vw, 11rem); } .rhnst-project-detail__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(4rem, 9vw, 7rem); } .rhnst-project-detail__information { position: relative; top: auto; max-width: 46rem; } .rhnst-project-detail__title { max-width: 14ch; font-size: clamp(3.2rem, 9vw, 6rem); } .rhnst-project-detail__client, .rhnst-project-detail__intro, .rhnst-project-detail__text, .rhnst-project-detail__services { max-width: 42rem; } } /* ========================================================= MOBIL ========================================================== */ @media (max-width: 700px) { .rhnst-project-detail { padding-block: clamp(7.5rem, 25vw, 9rem) clamp(4.5rem, 16vw, 6rem); } .rhnst-project-detail__inner { gap: 3.5rem; } .rhnst-project-detail__title { max-width: none; font-size: clamp(2.75rem, 14vw, 4.5rem); } .rhnst-project-detail__client { margin-top: 2rem; } .rhnst-project-detail__gallery { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .rhnst-project-detail__figure--full, .rhnst-project-detail__figure--half, .rhnst-project-detail__figure--portrait { grid-column: 1; } .rhnst-project-detail__figure--portrait:nth-child(even) { margin-top: 0; } .rhnst-project-navigation { grid-template-columns: minmax(0, 1fr); margin-top: 5rem; } .rhnst-project-navigation__link { min-height: 9rem; } .rhnst-project-navigation__link--previous { border-right: 0; border-bottom: 1px solid var(--rhnst-project-line); } .rhnst-project-navigation__link--next { align-items: flex-start; padding-right: 1.5rem; padding-left: 3.5rem; text-align: left; } .rhnst-project-navigation__link--next::before { right: auto; left: 1rem; } } /* ========================================================= REDUZIERTE BEWEGUNG ========================================================== */ @media (prefers-reduced-motion: reduce) { .rhnst-project-detail__external-link, .rhnst-project-navigation__link, .rhnst-project-navigation__link::before, .rhnst-project-navigation__direction { transition: none; } } /* ========================================================= ABSTRAHIERTER BROWSERRAHMEN ========================================================== */ .rhnst-browser-frame { position: relative; overflow: hidden; border: 1px solid rgba(28, 41, 114, 0.2); border-radius: clamp(0.9rem, 1.8vw, 1.5rem); background: #f5f5f3; box-shadow: 0 2rem 5rem rgba(28, 41, 114, 0.12), 0 0.5rem 1.5rem rgba(28, 41, 114, 0.07); } .rhnst-browser-frame__bar { position: relative; display: flex; align-items: center; min-height: clamp(2.8rem, 4vw, 3.8rem); padding-inline: clamp(1rem, 2vw, 1.5rem); border-bottom: 1px solid rgba(28, 41, 114, 0.12); background: linear-gradient( 180deg, #fff 0%, #f6f6f4 100% ); } .rhnst-browser-frame__controls { display: flex; align-items: center; gap: 0.42rem; } .rhnst-browser-frame__controls span { display: block; width: clamp(0.42rem, 0.65vw, 0.58rem); aspect-ratio: 1; border-radius: 50%; background: rgba(28, 41, 114, 0.28); } .rhnst-browser-frame__address { position: absolute; top: 50%; left: 50%; max-width: 45%; overflow: hidden; padding: 0.38rem clamp(1rem, 3vw, 2.5rem); border: 1px solid rgba(28, 41, 114, 0.08); border-radius: 100vw; background: rgba(255, 255, 255, 0.75); color: rgba(28, 41, 114, 0.58); font-size: clamp(0.62rem, 0.85vw, 0.78rem); font-weight: 600; letter-spacing: 0.025em; line-height: 1; text-overflow: ellipsis; white-space: nowrap; transform: translate(-50%, -50%); } .rhnst-browser-frame__viewport { position: relative; overflow: hidden; background: #fff; } .rhnst-browser-frame__viewport .rhnst-project-detail__image { width: 100%; margin: 0; } /* ========================================================= BROWSERRAHMEN MOBIL ========================================================== */ @media (max-width: 700px) { .rhnst-browser-frame { border-radius: 0.85rem; box-shadow: 0 1.25rem 3rem rgba(28, 41, 114, 0.1); } .rhnst-browser-frame__bar { min-height: 2.6rem; } .rhnst-browser-frame__address { max-width: 55%; padding-inline: 1rem; } } /* ========================================================= BROWSER SCHLIESSEN ========================================================== */ .rhnst-browser-frame__close { position: relative; display: block; flex: 0 0 auto; width: clamp(0.42rem, 0.65vw, 0.58rem); aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(28, 41, 114, 0.28); cursor: pointer; transition: background-color 180ms ease, transform 180ms ease; } .rhnst-browser-frame__close::before, .rhnst-browser-frame__close::after { position: absolute; top: 50%; left: 50%; width: 62%; height: 1px; border-radius: 100vw; background: #fff; content: ""; opacity: 0; transition: opacity 180ms ease; } .rhnst-browser-frame__close::before { transform: translate(-50%, -50%) rotate(45deg); } .rhnst-browser-frame__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .rhnst-browser-frame__close:hover, .rhnst-browser-frame__close:focus-visible { background: #e5484d; transform: scale(1.25); } .rhnst-browser-frame__close:hover::before, .rhnst-browser-frame__close:hover::after, .rhnst-browser-frame__close:focus-visible::before, .rhnst-browser-frame__close:focus-visible::after { opacity: 1; } .rhnst-browser-frame__close:focus-visible { outline: 2px solid rgba(229, 72, 77, 0.4); outline-offset: 0.25rem; } /* Schließanimation */ .rhnst-project-detail__figure--closing { pointer-events: none; animation: rhnst-browser-close 280ms cubic-bezier(0.4, 0, 1, 1) forwards; } @keyframes rhnst-browser-close { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.94) translateY(1rem); } } @media (prefers-reduced-motion: reduce) { .rhnst-browser-frame__close { transition: none; } .rhnst-project-detail__figure--closing { animation-duration: 1ms; } } /* ========================================================= DUNKLER FOOTER AUF PROJEKTSEITEN ========================================================== */ .rhnst-page--project .rhnst-footer { background: #1c2972; color: #fff; } .rhnst-page--project .rhnst-footer__linkedin { border-color: #fff; } /* Überschriften und Texte */ .rhnst-page--project .rhnst-footer__eyebrow, .rhnst-page--project .rhnst-footer__title, .rhnst-page--project .rhnst-footer__text, .rhnst-page--project .rhnst-footer__contact, .rhnst-page--project .rhnst-footer__address, .rhnst-page--project .rhnst-footer__copyright { color: #fff; } .rhnst-page--project .rhnst-footer__text { color: rgba(255, 255, 255, 0.76); } /* Kleine Bezeichnungen */ .rhnst-page--project .rhnst-footer__label { color: rgba(255, 255, 255, 0.58); } /* Kontaktlinks */ .rhnst-page--project .rhnst-footer__mail, .rhnst-page--project .rhnst-footer__contact-link, .rhnst-page--project .rhnst-footer__linkedin { color: #fff; } .rhnst-page--project .rhnst-footer__mail:hover, .rhnst-page--project .rhnst-footer__contact-link:hover, .rhnst-page--project .rhnst-footer__linkedin:hover { color: rgba(255, 255, 255, 0.68); } /* Mail-Pfeil */ .rhnst-page--project .rhnst-footer__mail-icon { fill: none; stroke: currentColor; } /* LinkedIn-Icon */ .rhnst-page--project .rhnst-footer__linkedin svg { fill: currentColor; } /* Trennlinien */ .rhnst-page--project .rhnst-footer__bottom { border-color: rgba(255, 255, 255, 0.22); } /* Rechtliche Navigation */ .rhnst-page--project .rhnst-footer__legal a { color: rgba(255, 255, 255, 0.68); } .rhnst-page--project .rhnst-footer__legal a:hover { color: #fff; } /* Falls die Links eine animierte Linie besitzen */ .rhnst-page--project .rhnst-footer__legal a::after { background: #fff; } /* Fokusdarstellung */ .rhnst-page--project .rhnst-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 0.35rem; } .rhnst-profile__portrait-switch { position: absolute; z-index: 5; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; padding: 0.65rem; color: var(--rhnst-color-blue); background: rgba(255, 255, 255, 0.9); border: 0; border-radius: 50%; box-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.2); cursor: pointer; backdrop-filter: blur(8px); transition: transform 180ms ease, background-color 180ms ease; } .rhnst-profile__portrait-switch svg { display: block; width: 100%; height: 100%; } .rhnst-profile__portrait-switch:hover { transform: rotate(8deg) scale(1.08); background: #fff; } .rhnst-profile__portrait-switch:focus-visible { outline: 3px solid var(--rhnst-color-blue); outline-offset: 3px; }