:root { --rwp-bg: #080808; --rwp-panel: #101012; --rwp-panel-soft: #151518; --rwp-line: rgba(255, 255, 255, .1); --rwp-line-strong: rgba(255, 255, 255, .18); --rwp-text: #f4f3f1; --rwp-muted: #a3a3a8; --rwp-faint: #64646b; --rwp-red: #bd0d0d; --rwp-red-rgb: 189, 13, 13; --rwp-max: 1180px; --rwp-mono: "Share Tech Mono", "Courier New", monospace; --rwp-sans: "Inter", "Segoe UI", sans-serif; } html { scroll-behavior: smooth; } body.rwp-body { margin: 0; background: var(--rwp-bg); color: var(--rwp-text); font-family: var(--rwp-sans); -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------------- Die Startseite liegt in redwebhp.html.twig, und deren traegt keine Klassen. Frueher stand hier body.rwp-body; das greift so nicht mehr. Diese Regel setzt denselben Grund, aber nur auf der Seite, auf der die Portalhuelle wirklich steht. ⚠ Die Schriftart bleibt hier bewusst AUSSEN VOR. Auf demselben sitzen die Kopfleiste, die Erfahrungsleiste und die Zeitachsen-Ecken; die wuerden mitgezogen. Was ausserhalb von .rwp-shell liegt und Inter braucht, bekommt sie unten einzeln. ---------------------------------------------------------------------- */ body:has(.rwp-shell) { margin: 0; background: var(--rwp-bg); color: var(--rwp-text); -webkit-font-smoothing: antialiased; } /* Steht ausserhalb von .rwp-shell und erbt die Schrift daher nicht. */ .rwp-footer, .rwp-skip { font-family: var(--rwp-sans); } .rwp-shell, .rwp-shell *, .rwp-body * { box-sizing: border-box; } .rwp-shell { position: relative; overflow: hidden; background: radial-gradient(circle at 90% 0, rgba(var(--rwp-red-rgb), .08), transparent 34%), var(--rwp-bg); color: var(--rwp-text); font-family: var(--rwp-sans); -webkit-font-smoothing: antialiased; } .rwp-shell::before, .rwp-body::before { content: ""; position: fixed; inset: 0; z-index: 50; opacity: .025; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } .rwp-shell a, .rwp-body a { color: inherit; } .rwp-shell h1, .rwp-shell h2, .rwp-shell h3, .rwp-shell p, .rwp-body h1, .rwp-body h2, .rwp-body h3, .rwp-body p { margin-top: 0; } .rwp-skip { position: fixed; top: 10px; left: 10px; z-index: 9999; padding: 10px 14px; background: #fff; color: #050505 !important; font-weight: 800; text-decoration: none; transform: translateY(-160%); } .rwp-skip:focus { transform: translateY(0); } .rwp-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--rwp-text); text-decoration: none; } .rwp-brand__mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(var(--rwp-red-rgb), .7); border-radius: 8px; background: rgba(var(--rwp-red-rgb), .13); color: #ef3131; font-family: var(--rwp-mono); font-size: 19px; font-weight: 900; box-shadow: 0 0 22px rgba(var(--rwp-red-rgb), .12); } .rwp-brand__word { font-family: var(--rwp-mono); font-size: 15px; font-weight: 800; letter-spacing: .17em; } .rwp-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--rwp-accent, #d42424); font-family: var(--rwp-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; } .rwp-eyebrow > span { width: 28px; height: 1px; background: currentColor; } .rwp-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 12px 20px; border: 1px solid var(--rwp-accent, var(--rwp-red)); border-radius: 9px; background: var(--rwp-accent, var(--rwp-red)); color: #fff !important; font-family: var(--rwp-sans); font-size: 13px; font-weight: 800; text-decoration: none !important; transition: transform .2s ease, filter .2s ease, box-shadow .2s ease; } .rwp-button:hover, .rwp-button:focus-visible { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 12px 34px rgba(var(--rwp-accent-rgb, var(--rwp-red-rgb)), .22); } .rwp-button--ghost { border-color: var(--rwp-line-strong); background: rgba(255, 255, 255, .025); color: #d3d3d6 !important; } .rwp-button--ghost:hover, .rwp-button--ghost:focus-visible { border-color: rgba(var(--rwp-accent-rgb, var(--rwp-red-rgb)), .55); background: rgba(var(--rwp-accent-rgb, var(--rwp-red-rgb)), .08); } .rwp-button--small { min-height: 38px; padding: 8px 14px; font-size: 11px; } .rwp-button--light { border-color: #f3f3f1; background: #f3f3f1; color: #111 !important; } .rwp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .rwp-section { width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 104px 0; } .rwp-section__head { max-width: 720px; margin-bottom: 42px; } .rwp-section__head h2 { margin-bottom: 16px; color: var(--rwp-text); font-size: clamp(30px, 4.8vw, 58px); font-weight: 850; letter-spacing: -.045em; line-height: 1.02; } .rwp-section__head > p:last-child { max-width: 650px; margin-bottom: 0; color: var(--rwp-muted); font-size: 16px; line-height: 1.75; } /* Public area navigation */ .rwp-public-nav { position: relative; z-index: 20; width: min(calc(100% - 40px), var(--rwp-max)); min-height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rwp-line); } .rwp-public-nav__actions { display: flex; align-items: center; gap: 18px; } .rwp-text-link { color: #a8a8ad !important; font-size: 12px; font-weight: 700; text-decoration: none; } .rwp-text-link:hover { color: #fff !important; } /* Area hero */ .rwp-area { overflow: hidden; } .rwp-area-hero { position: relative; min-height: 710px; display: flex; align-items: center; border-bottom: 1px solid var(--rwp-line); background: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 64px 64px; } .rwp-area-hero__glow { position: absolute; width: 680px; height: 680px; top: -200px; right: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rwp-accent-rgb), .18), transparent 67%); filter: blur(12px); pointer-events: none; } .rwp-area-hero__grid { position: relative; z-index: 1; width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 86px 0 96px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr); align-items: center; gap: clamp(48px, 8vw, 110px); } .rwp-area-hero__copy { max-width: 790px; } .rwp-area-hero__question { margin-bottom: 10px; color: #85858b; font-family: var(--rwp-mono); font-size: 13px; letter-spacing: .06em; } .rwp-area-hero h1 { margin-bottom: 19px; color: var(--rwp-text); font-size: clamp(48px, 8vw, 102px); font-weight: 900; letter-spacing: -.065em; line-height: .9; } .rwp-area-hero__headline { margin-bottom: 14px; color: var(--rwp-accent); font-size: clamp(20px, 2.6vw, 31px); font-weight: 720; letter-spacing: -.025em; } .rwp-area-hero__description { max-width: 690px; margin-bottom: 30px; color: var(--rwp-muted); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.75; } .rwp-area-signal { position: relative; padding: 28px; border: 1px solid rgba(var(--rwp-accent-rgb), .3); border-radius: 18px; background: linear-gradient(145deg, rgba(var(--rwp-accent-rgb), .1), rgba(15,15,17,.9) 55%); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); } .rwp-area-signal::before { content: ""; position: absolute; top: 0; left: 26px; width: 72px; height: 2px; background: var(--rwp-accent); box-shadow: 0 0 16px rgba(var(--rwp-accent-rgb), .65); } .rwp-area-signal__icon { width: 60px; height: 60px; margin-bottom: 28px; display: grid; place-items: center; border: 1px solid rgba(var(--rwp-accent-rgb), .4); border-radius: 15px; background: rgba(var(--rwp-accent-rgb), .13); color: var(--rwp-accent); font-size: 26px; } .rwp-area-signal p { margin-bottom: 13px; color: var(--rwp-accent); font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .rwp-area-signal strong { display: block; margin-bottom: 12px; color: #f5f5f4; font-size: 19px; line-height: 1.3; } .rwp-area-signal > span { display: block; color: #8b8b91; font-size: 13px; line-height: 1.7; } .rwp-section--features { padding-bottom: 116px; } .rwp-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rwp-line); border-bottom: 1px solid var(--rwp-line); } .rwp-feature { min-height: 235px; padding: 30px; border-right: 1px solid var(--rwp-line); } .rwp-feature:last-child { border-right: 0; } .rwp-feature__number { display: block; margin-bottom: 43px; color: var(--rwp-accent); font-family: var(--rwp-mono); font-size: 11px; } .rwp-feature h3 { margin-bottom: 12px; color: var(--rwp-text); font-size: 20px; font-weight: 780; } .rwp-feature p { margin-bottom: 0; color: #85858a; font-size: 14px; line-height: 1.7; } .rwp-section--dark { width: 100%; max-width: none; padding: 110px max(20px, calc((100% - var(--rwp-max)) / 2)); border-top: 1px solid var(--rwp-line); border-bottom: 1px solid var(--rwp-line); background: #050506; } .rwp-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rwp-public-card { min-height: 92px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 15px; padding: 20px 22px; border: 1px solid var(--rwp-line); border-radius: 12px; background: #0d0d0f; color: #e8e8e6 !important; text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; } .rwp-public-card:hover, .rwp-public-card:focus-visible { border-color: rgba(var(--rwp-accent-rgb), .5); background: rgba(var(--rwp-accent-rgb), .07); transform: translateY(-2px); } .rwp-public-card > i:first-child { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--rwp-accent-rgb), .11); color: var(--rwp-accent); font-size: 18px; } .rwp-public-card span { font-size: 14px; font-weight: 760; } .rwp-public-card > i:last-child { color: #63636a; font-size: 14px; } .rwp-access-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; align-items: stretch; } .rwp-access-copy { padding: 18px 34px 18px 0; } .rwp-access-copy h2 { margin-bottom: 20px; color: var(--rwp-text); font-size: clamp(30px, 4vw, 50px); font-weight: 850; letter-spacing: -.045em; line-height: 1.04; } .rwp-access-copy > p:last-child { margin-bottom: 0; color: var(--rwp-muted); font-size: 15px; line-height: 1.75; } .rwp-access-card { padding: 27px; border: 1px solid var(--rwp-line); border-radius: 16px; background: var(--rwp-panel); } .rwp-access-card--private { border-color: rgba(var(--rwp-accent-rgb), .34); background: linear-gradient(155deg, rgba(var(--rwp-accent-rgb), .1), var(--rwp-panel) 65%); } .rwp-access-card > span { display: block; margin-bottom: 21px; color: var(--rwp-accent); font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; } .rwp-access-card h3 { margin-bottom: 17px; font-size: 19px; } .rwp-access-card ul { margin: 0; padding: 0; list-style: none; } .rwp-access-card li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--rwp-line); color: #929298; font-size: 12px; line-height: 1.5; } .rwp-access-card li::before { content: ""; position: absolute; top: 17px; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--rwp-accent); } .rwp-account-cta { margin-top: 48px; padding: 26px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border: 1px solid rgba(var(--rwp-accent-rgb), .3); border-radius: 15px; background: rgba(var(--rwp-accent-rgb), .06); } .rwp-account-cta small { display: block; margin-bottom: 6px; color: var(--rwp-accent); font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; } .rwp-account-cta strong { font-size: 17px; } .rwp-real-bridge { width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto 80px; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; border-radius: 20px; background: linear-gradient(110deg, rgba(var(--rwp-red-rgb), .82), rgba(92, 5, 5, .94)), #8b0a0a; box-shadow: 0 30px 80px rgba(var(--rwp-red-rgb), .18); } .rwp-real-bridge .rwp-eyebrow { color: rgba(255,255,255,.72); } .rwp-real-bridge h2 { margin-bottom: 12px; color: #fff; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -.04em; } .rwp-real-bridge p:last-child { max-width: 690px; margin-bottom: 0; color: rgba(255,255,255,.72); line-height: 1.7; } .rwp-real-bridge .rwp-button { flex: 0 0 auto; } .rwp-section--other { padding-top: 54px; } .rwp-other-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .rwp-other-link { min-height: 88px; display: flex; align-items: center; gap: 14px; padding: 17px; border: 1px solid var(--rwp-line); border-radius: 12px; background: #0f0f11; color: #d8d8da !important; text-decoration: none; transition: border-color .2s ease, background .2s ease; } .rwp-other-link:hover, .rwp-other-link.is-current { border-color: rgba(var(--item-rgb), .45); background: rgba(var(--item-rgb), .07); } .rwp-other-link > i { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--item-rgb), .12); color: var(--item-color); font-size: 17px; } .rwp-other-link span { font-size: 12px; font-weight: 750; line-height: 1.35; } .rwp-other-link small { display: block; margin-bottom: 3px; color: #66666d; font-size: 9px; font-weight: 600; } .rwp-footer { width: min(calc(100% - 40px), var(--rwp-max)); min-height: 110px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--rwp-line); color: #626269; font-size: 11px; } .rwp-footer p { margin: 0; text-align: center; } .rwp-footer nav { display: flex; gap: 15px; } .rwp-footer nav a { color: #77777d; text-decoration: none; } .rwp-footer nav a:hover { color: #fff; } /* Homepage lobby */ .rwp-home-hero { position: relative; min-height: min(820px, calc(100svh - 20px)); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--rwp-line); background: radial-gradient(circle at 70% 30%, rgba(var(--rwp-red-rgb), .15), transparent 30%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px); background-size: auto, 72px 72px, 72px 72px; } .rwp-home-hero::after { content: "REDWEB"; position: absolute; right: -3vw; bottom: -4vw; color: rgba(255, 255, 255, .023); font-size: clamp(110px, 23vw, 360px); font-weight: 900; letter-spacing: -.09em; line-height: .75; pointer-events: none; } .rwp-home-hero__inner { position: relative; z-index: 2; width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 100px 0 110px; } .rwp-home-hero__title { max-width: 1000px; margin-bottom: 25px; color: #f6f5f2; font-size: clamp(54px, 9.6vw, 132px); font-weight: 900; letter-spacing: -.075em; line-height: .87; } .rwp-home-hero__title span { color: #e52323; } .rwp-home-hero__lead { max-width: 730px; margin-bottom: 32px; color: #aaaab0; font-size: clamp(17px, 2vw, 22px); line-height: 1.65; } .rwp-home-hero__proof { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 9px; } .rwp-home-hero__proof span { padding: 7px 10px; border: 1px solid var(--rwp-line); border-radius: 7px; background: rgba(255,255,255,.025); color: #74747b; font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .06em; } .rwp-member-resume { width: min(calc(100% - 40px), var(--rwp-max)); margin: 18px auto 0; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(var(--member-rgb), .35); border-radius: 12px; background: rgba(var(--member-rgb), .08); } .rwp-member-resume__copy { display: flex; align-items: center; gap: 12px; } .rwp-member-resume__copy > i { color: var(--member-color); font-size: 18px; } .rwp-member-resume__copy small { display: block; color: #68686e; font-family: var(--rwp-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; } .rwp-member-resume__copy strong { color: #efefed; font-size: 13px; } .rwp-member-resume > a { color: var(--member-color); font-size: 12px; font-weight: 800; text-decoration: none; } .rwp-lobby { width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 110px 0 126px; } .rwp-lobby__intro { display: grid; grid-template-columns: 1fr .8fr; gap: 60px; align-items: end; margin-bottom: 52px; } .rwp-lobby__intro h2 { margin-bottom: 0; color: #f3f2ef; font-size: clamp(39px, 6vw, 74px); font-weight: 870; letter-spacing: -.055em; line-height: .98; } .rwp-lobby__intro > p { margin-bottom: 4px; color: #8c8c92; font-size: 15px; line-height: 1.75; } .rwp-area-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .rwp-area-card { --card-accent: var(--item-color); position: relative; min-height: 305px; padding: 28px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--rwp-line); border-radius: 18px; background: linear-gradient(145deg, rgba(var(--item-rgb), .065), #111113 47%); color: #efefed !important; text-decoration: none !important; transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease; } .rwp-area-card::before { content: ""; position: absolute; inset: auto -120px -180px auto; width: 330px; height: 330px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--item-rgb), .16), transparent 66%); transition: transform .35s ease; } .rwp-area-card::after { content: ""; position: absolute; top: 0; left: 28px; width: 70px; height: 2px; background: var(--item-color); box-shadow: 0 0 18px rgba(var(--item-rgb), .55); } .rwp-area-card:hover, .rwp-area-card:focus-visible { border-color: rgba(var(--item-rgb), .48); transform: translateY(-5px); box-shadow: 0 24px 64px rgba(0,0,0,.38); } .rwp-area-card:hover::before { transform: scale(1.14); } .rwp-area-card__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .rwp-area-card__icon { width: 50px; height: 50px; display: grid; place-items: center; border: 1px solid rgba(var(--item-rgb), .35); border-radius: 13px; background: rgba(var(--item-rgb), .1); color: var(--item-color); font-size: 22px; } .rwp-area-card__index { color: #525258; font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .1em; } .rwp-area-card__body { position: relative; z-index: 1; margin-top: auto; padding-top: 44px; } .rwp-area-card__question { margin-bottom: 7px; color: var(--item-color); font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; } .rwp-area-card h3 { margin-bottom: 12px; color: #f2f2f0; font-size: clamp(25px, 3vw, 35px); font-weight: 820; letter-spacing: -.035em; } .rwp-area-card__description { max-width: 500px; margin-bottom: 22px; color: #89898f; font-size: 13px; line-height: 1.65; } .rwp-area-card__enter { display: flex; align-items: center; justify-content: space-between; padding-top: 17px; border-top: 1px solid var(--rwp-line); color: #c8c8ca; font-size: 11px; font-weight: 760; } .rwp-area-card__enter i { color: var(--item-color); } .rwp-explanation { border-top: 1px solid var(--rwp-line); border-bottom: 1px solid var(--rwp-line); background: #050506; } .rwp-explanation__inner { width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 110px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 120px); align-items: start; } .rwp-explanation__mark { position: sticky; top: 110px; color: rgba(var(--rwp-red-rgb), .16); font-family: var(--rwp-mono); font-size: clamp(110px, 18vw, 240px); font-weight: 900; line-height: .7; } .rwp-explanation__copy h2 { margin-bottom: 27px; color: #f4f3f0; font-size: clamp(38px, 6vw, 72px); font-weight: 870; letter-spacing: -.055em; line-height: .98; } .rwp-explanation__copy > p { color: #98989d; font-size: 16px; line-height: 1.8; } .rwp-explanation__copy > p strong { color: #e7e7e4; } .rwp-explanation__copy .rwp-actions { margin-top: 30px; } .rwp-world-bridge { width: min(calc(100% - 40px), var(--rwp-max)); margin: 0 auto; padding: 120px 0; } .rwp-world-bridge__head { max-width: 720px; margin-bottom: 55px; } .rwp-world-bridge__head h2 { margin-bottom: 16px; font-size: clamp(38px, 6vw, 68px); letter-spacing: -.05em; } .rwp-world-bridge__head p:last-child { color: #8b8b91; font-size: 16px; line-height: 1.75; } .rwp-world-map { display: grid; grid-template-columns: 1fr 140px 1fr; align-items: stretch; } .rwp-world-map__side { padding: 36px; border: 1px solid var(--rwp-line); border-radius: 17px; background: #111113; } .rwp-world-map__side small { display: block; margin-bottom: 14px; color: #68686f; font-family: var(--rwp-mono); font-size: 10px; letter-spacing: .13em; } .rwp-world-map__side h3 { margin-bottom: 20px; font-size: 29px; } .rwp-world-map__side ul { margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; } .rwp-world-map__side li { padding: 6px 9px; border: 1px solid var(--rwp-line); border-radius: 6px; color: #8e8e94; font-size: 10px; } .rwp-world-map__side a { color: #d9d9dc; font-size: 12px; font-weight: 750; text-decoration: none; } .rwp-world-map__center { position: relative; display: grid; place-items: center; color: #efefed; font-family: var(--rwp-mono); font-size: 12px; letter-spacing: .13em; } .rwp-world-map__center::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--rwp-line), var(--rwp-red), var(--rwp-line)); } .rwp-world-map__center span { position: relative; z-index: 1; width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(var(--rwp-red-rgb), .55); border-radius: 50%; background: #090909; box-shadow: 0 0 35px rgba(var(--rwp-red-rgb), .17); } .rwp-idea-teaser { position: relative; padding: 130px 20px; overflow: hidden; border-top: 1px solid var(--rwp-line); background: linear-gradient(145deg, #151516, #080808 65%); text-align: center; } .rwp-idea-teaser::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(var(--rwp-red-rgb), .19), transparent 45%); } .rwp-idea-teaser__inner { position: relative; z-index: 1; max-width: 910px; margin: 0 auto; } .rwp-idea-teaser .rwp-eyebrow { justify-content: center; } .rwp-idea-teaser h2 { margin-bottom: 22px; font-size: clamp(42px, 7vw, 88px); font-weight: 900; letter-spacing: -.06em; line-height: .94; } .rwp-idea-teaser h2 span { color: #e42424; } .rwp-idea-teaser p:not(.rwp-eyebrow) { max-width: 720px; margin: 0 auto 32px; color: #929298; font-size: 16px; line-height: 1.8; } .rwp-idea-teaser .rwp-actions { justify-content: center; } .rwp-js [data-rwp-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); } .rwp-js [data-rwp-reveal].is-visible { opacity: 1; transform: translateY(0); } @media (max-width: 920px) { .rwp-area-hero__grid { grid-template-columns: 1fr; } .rwp-area-signal { max-width: 620px; } .rwp-access-grid { grid-template-columns: 1fr 1fr; } .rwp-access-copy { grid-column: 1 / -1; padding-right: 0; } .rwp-other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rwp-lobby__intro { grid-template-columns: 1fr; gap: 22px; } .rwp-explanation__inner { grid-template-columns: 160px 1fr; } .rwp-world-map { grid-template-columns: 1fr 90px 1fr; } } @media (max-width: 700px) { .rwp-public-nav { min-height: 66px; } .rwp-public-nav__actions .rwp-text-link:first-child { display: none; } .rwp-public-nav__actions { gap: 10px; } .rwp-section { padding: 76px 0; } .rwp-area-hero { min-height: 0; } .rwp-area-hero__grid { padding: 72px 0; gap: 42px; } .rwp-feature-grid { grid-template-columns: 1fr; } .rwp-feature { min-height: 0; border-right: 0; border-bottom: 1px solid var(--rwp-line); } .rwp-feature:last-child { border-bottom: 0; } .rwp-feature__number { margin-bottom: 24px; } .rwp-link-grid { grid-template-columns: 1fr; } .rwp-access-grid { grid-template-columns: 1fr; } .rwp-account-cta, .rwp-real-bridge { align-items: flex-start; flex-direction: column; } .rwp-other-grid { grid-template-columns: 1fr; } .rwp-footer { padding: 30px 0; flex-direction: column; text-align: center; } .rwp-home-hero { min-height: 700px; } .rwp-home-hero__inner { padding: 80px 0 90px; } .rwp-member-resume { align-items: flex-start; flex-direction: column; } .rwp-lobby { padding: 82px 0 94px; } .rwp-area-grid { grid-template-columns: 1fr; } .rwp-area-card { min-height: 285px; } .rwp-explanation__inner { grid-template-columns: 1fr; padding: 82px 0; } .rwp-explanation__mark { position: static; font-size: 100px; } .rwp-world-bridge { padding: 85px 0; } .rwp-world-map { grid-template-columns: 1fr; gap: 0; } .rwp-world-map__center { min-height: 105px; } .rwp-world-map__center::before { top: 0; bottom: 0; left: 50%; right: auto; width: 1px; height: auto; background: linear-gradient(var(--rwp-line), var(--rwp-red), var(--rwp-line)); } .rwp-idea-teaser { padding: 95px 20px; } } @media (max-width: 480px) { .rwp-public-nav, .rwp-section, .rwp-area-hero__grid, .rwp-real-bridge, .rwp-footer, .rwp-home-hero__inner, .rwp-member-resume, .rwp-lobby, .rwp-explanation__inner, .rwp-world-bridge { width: min(calc(100% - 28px), var(--rwp-max)); } .rwp-brand__word { display: none; } .rwp-public-nav__actions .rwp-text-link { font-size: 11px; } .rwp-public-nav__actions .rwp-button { padding-inline: 11px; } .rwp-area-hero h1 { font-size: clamp(45px, 16vw, 68px); } .rwp-area-signal, .rwp-feature, .rwp-access-card, .rwp-area-card { padding: 22px; } .rwp-section--dark { padding-left: 14px; padding-right: 14px; } .rwp-actions { align-items: stretch; flex-direction: column; } .rwp-actions .rwp-button { width: 100%; } .rwp-real-bridge { padding: 32px 24px; } .rwp-home-hero__title { font-size: clamp(50px, 18vw, 78px); } .rwp-home-hero__proof { gap: 6px; } .rwp-area-card h3 { font-size: 27px; } } /* ---------------------------------------------------------------------- Reduzierte Bewegung. ⚠ Der Geltungsbereich ist AUSDRUECKLICH auf die Portalseite begrenzt. Hier stand vorher `*, *::before, *::after { ... !important }`, und das traf alles auf der Seite - auch die Zeitkanten in den oberen Ecken, die Kopfleiste und die Erfahrungsleiste. Weil `!important` jede Keyframe-Angabe schlaegt, lief die Pfeilanimation der Zeitachse damit einmal in einer hundertstel Millisekunde ab und fiel danach auf ihren Grundwert `opacity: 0` zurueck: einmal aufblitzen beim Laden, danach nichts mehr. Auf allen anderen Seiten lief sie normal, weil dieses Blatt dort nicht geladen wird. Ein Blatt darf nur seine eigenen Bewegungen zaehmen, nicht die der ganzen Plattform. Deshalb jetzt nur noch innerhalb der Portalhuelle und des Fusses. ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .rwp-shell, .rwp-shell *, .rwp-shell *::before, .rwp-shell *::after, .rwp-footer, .rwp-footer *, .rwp-footer *::before, .rwp-footer *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-rwp-reveal] { opacity: 1; transform: none; } }