/* * Startseite im dunklen Look: Mitternachtsblau als Grund, Cyan für Technisches, * Amber für alles, was zum Handeln auffordert. * * Eigene Datei neben redesign.css, die weiterhin die bestehenden Seiten trägt — * die beiden dürfen sich nicht ins Gehege kommen. Deshalb hängt hier alles unter * der Klasse .rd am : ohne sie greift keine einzige Regel. * * Die an-*-Klassen bedienen die Bewegung aus rd-anime.js. Ohne JavaScript bleibt * alles sichtbar, nur unbewegt. */ /* ── Schriften ────────────────────────────────────────────────────────────── Lokal eingebunden, nicht über Google: die Content-Security-Policy lässt externe Schriftquellen nicht zu (font-src 'self'), und bei einer Seite, die mit DSGVO-Konformität wirbt, wären extern geladene Google Fonts ohnehin die falsche Botschaft. Instrument Sans steht für IBM Plex Sans aus dem Entwurf, IBM Plex Mono liegt im Bestand. */ @font-face { font-family: 'RD Sans'; src: url('/assets/fonts/instrumentsans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'RD Sans'; src: url('/assets/fonts/instrumentsans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'RD Sans'; src: url('/assets/fonts/instrumentsans-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'RD Sans'; src: url('/assets/fonts/instrumentsans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } /* Für die kräftigen Überschriften des Entwurfs (Chakra Petch / Archivo). */ @font-face { font-family: 'RD Titel'; src: url('/assets/fonts/archivo-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'RD Titel'; src: url('/assets/fonts/archivo-800.woff2') format('woff2'); font-weight: 800; font-display: swap; } @font-face { font-family: 'RD Titel'; src: url('/assets/fonts/archivo-900.woff2') format('woff2'); font-weight: 900; font-display: swap; } @font-face { font-family: 'RD Mono'; src: url('/assets/fonts/ibmplexmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'RD Mono'; src: url('/assets/fonts/ibmplexmono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'RD Mono'; src: url('/assets/fonts/ibmplexmono-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } .rd { --nacht: #141E2B; /* Grundfläche */ --nacht-tief: #0A0E17; /* Abschnitte, die sich absetzen */ --nacht-hell: #1C2938; /* Karten */ --cyan: #2FD3C9; /* technische Akzente, Linien, Marker */ --amber: #FF8A1F; /* Handlungsaufforderung */ --rd-text: #E8EFF6; --rd-leise: #A8B9CB; --rd-linie: rgba(47, 211, 201, .16); background: var(--nacht); color: var(--rd-text); font-family: 'RD Sans', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; margin: 0; overflow-x: hidden; } .rd *, .rd *::before, .rd *::after { box-sizing: border-box; } .rd img, .rd video { max-width: 100%; } .rd h1, .rd h2, .rd h3, .rd h4 { margin: 0; } .rd p { margin: 0; } .rd-mono { font-family: 'RD Mono', ui-monospace, Menlo, monospace; } .rd-innen { max-width: 1240px; margin: 0 auto; padding: 0 40px; } /* ── Bewegung ─────────────────────────────────────────────────────────────── Elemente mit .an-rev starten leicht versetzt und blenden ein, sobald sie ins Bild kommen. Die Staffelung je Element steckt im JS, damit Karten einer Reihe nacheinander erscheinen statt alle auf einmal. */ .rd .an-rev { opacity: 0; transform: translateY(18px); transition: opacity .55s cubic-bezier(.2, .7, .3, 1), transform .55s cubic-bezier(.2, .7, .3, 1); } .rd .an-rev.an-da { opacity: 1; transform: none; } /* Ohne JavaScript oder bei „weniger Bewegung" darf nichts unsichtbar bleiben. */ @media (prefers-reduced-motion: reduce) { .rd .an-rev { opacity: 1; transform: none; transition: none; } .rd [data-an-par] { transform: none !important; } } .no-js .rd .an-rev { opacity: 1; transform: none; } /* ── Verweise und Hover ─────────────────────────────────────────────────── */ .rd a { color: inherit; text-decoration: none; } .rd .an-a { position: relative; transition: color .18s; } .rd .an-a:hover { color: var(--cyan); } /* Unterstrich wächst aus der Mitte, statt hart zu erscheinen. */ .rd .an-a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--cyan); transform: scaleX(0); transform-origin: center; transition: transform .22s cubic-bezier(.2, .7, .3, 1); } .rd .an-a:hover::after { transform: scaleX(1); } .rd .an-card { transition: transform .22s cubic-bezier(.2,.7,.3,1), border-color .22s, box-shadow .22s; } .rd .an-card:hover { transform: translateY(-3px); border-color: rgba(47, 211, 201, .45) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, .38); } .rd .an-card-c:hover { border-color: rgba(255, 138, 31, .5) !important; } .rd .an-chip { transition: background .18s, border-color .18s, color .18s; } .rd .an-chip:hover { background: rgba(47, 211, 201, .12); border-color: rgba(47, 211, 201, .5); color: var(--rd-text); } .rd .an-plus { transition: transform .2s, box-shadow .2s; } .rd .an-plus:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(255, 138, 31, .55); } /* Kundenlogos: erst zurückhaltend, beim Überfahren in Farbe. */ /* Kundenlogos in ihren eigenen Farben: die Marken der Kunden sollen als Marken erkennbar sein, nicht als graue Silhouetten. Beim Überfahren hebt sich das Logo leicht an, mehr Effekt braucht es nicht. */ .rd .an-ref { transition: opacity .22s, transform .22s; opacity: .92; } .rd .an-ref:hover { opacity: 1; transform: translateY(-2px); } .rd .an-ref-dark { transition: opacity .22s, transform .22s; opacity: .92; } .rd .an-ref-dark:hover { opacity: 1; transform: translateY(-2px); } .rd .rd-nav-links { display: flex; } .rd a.rd-btn.rd-nav-mobil { display: none; } .rd .an-det { transition: background .18s, border-color .18s; } .rd .an-det:hover { background: rgba(255, 255, 255, .04); border-color: rgba(47, 211, 201, .35); } .rd .an-sum { cursor: pointer; list-style: none; } .rd .an-sum::-webkit-details-marker { display: none; } /* ── Knöpfe ─────────────────────────────────────────────────────────────── */ .rd .rd-btn, .rd a.rd-btn, .rd-btn { display: inline-flex; align-items: center; gap: 8px; /* Weiß auf Amber: das dunkle Blau des Entwurfs verschwamm auf dem Orange. */ background: var(--amber); color: #fff; padding: 12px 22px; border-radius: 3px; border: none; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; transition: box-shadow .18s, transform .18s; } .rd .rd-btn:hover, .rd-btn:hover { box-shadow: 0 0 22px rgba(255, 138, 31, .5); transform: translateY(-1px); } .rd .rd-btn-linie, .rd-btn-linie { background: transparent; color: var(--rd-text); border: 1px solid rgba(47, 211, 201, .4); } .rd .rd-btn-linie:hover, .rd-btn-linie:hover { background: rgba(47, 211, 201, .1); box-shadow: none; border-color: var(--cyan); } /* ── Laufband der Technologien ────────────────────────────────────────────── Der Streifen hat eine feste Höhe, damit er nicht zusammenfällt, wenn die Logos noch nicht geladen sind. Das Label steht als eigene Spalte daneben, nicht absolut darüber: sonst überdeckt es bei schmalen Fenstern die ersten Logos. */ .rd-stack { display: flex; align-items: center; border-top: 1px solid var(--rd-linie); border-bottom: 1px solid var(--rd-linie); background: #101A26; height: 84px; overflow: hidden; } .rd-stack-label { flex: 0 0 auto; padding: 0 26px 0 40px; font-size: 9.5px; letter-spacing: .18em; color: #8598AC; white-space: nowrap; border-right: 1px solid var(--rd-linie); align-self: stretch; display: flex; align-items: center; } .rd-lauf { flex: 1 1 auto; min-width: 0; /* ohne min-width:0 wächst der Flex-Bereich mit dem Inhalt */ overflow: hidden; position: relative; /* Nur rechts ausblenden: links steht das Label mit Trennlinie, dort würde ein weicher Verlauf das erste Logo halb verschlucken. */ -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 70px), transparent); } .rd-lauf-spur { display: flex; align-items: center; width: max-content; animation: rd-lauf 80s linear infinite; } .rd-lauf-gruppe { display: flex; align-items: center; gap: 52px; padding: 0 26px 0 26px; flex: 0 0 auto; } .rd-lauf img { opacity: .82; transition: opacity .2s; } .rd-lauf img:hover { opacity: 1; } .rd-lauf:hover .rd-lauf-spur { animation-play-state: paused; } @keyframes rd-lauf { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } } @media (prefers-reduced-motion: reduce) { .rd-lauf-spur { animation: none; } } @media (max-width: 700px) { .rd-stack { height: 68px; } .rd-stack-label { padding: 0 16px 0 20px; } } /* ── Formularfelder ─────────────────────────────────────────────────────── */ .rd input[type=text], .rd input[type=email], .rd input[type=tel], .rd textarea, .rd select { width: 100%; background: rgba(255,255,255,.04); color: var(--rd-text); border: 1px solid rgba(47,211,201,.22); border-radius: 3px; padding: 12px 14px; font-family: inherit; font-size: 14px; outline: none; transition: border-color .18s, background .18s; } .rd input:focus, .rd textarea:focus { border-color: var(--cyan); background: rgba(255,255,255,.06); } .rd input::placeholder, .rd textarea::placeholder { color: rgba(168,185,203,.6); } /* ── Mobil ────────────────────────────────────────────────────────────────── Der Entwurf hat eine eigene Mobilfassung ohne Parallax; hier genügt es, die Raster zu brechen, die Ränder zu verkleinern und die Bewegung abzuschalten. */ @media (max-width: 900px) { .rd-innen { padding: 0 20px; } .rd .rd-nav-links { display: none; } .rd a.rd-btn.rd-nav-mobil { display: inline-flex; } .rd-grid-2, .rd-grid-3, .rd-grid-4, .rd-grid-5 { grid-template-columns: 1fr !important; } .rd-hero { height: auto !important; min-height: 78vh; } .rd-hero h1 { font-size: 34px !important; line-height: 1.15 !important; } .rd [data-an-par] { transform: none !important; } .rd-weg-mobil { display: none !important; } } @media (max-width: 600px) { .rd { font-size: 15px; } .rd-hero h1 { font-size: 28px !important; } .rd-innen { padding: 0 16px; } } /* Der Entwurf setzt die Schriftfamilien inline; hier auf die lokalen umlenken. */ .rd [style*="Chakra Petch"], .rd [style*="Archivo"] { font-family: 'RD Titel', 'RD Sans', sans-serif !important; } .rd [style*="IBM Plex Mono"] { font-family: 'RD Mono', ui-monospace, monospace !important; } .rd [style*="IBM Plex Sans"] { font-family: 'RD Sans', sans-serif !important; } /* Das Ollama-Zeichen liegt nur in Schwarz vor und verschwindet damit im dunklen Laufband. Einfärben statt eine zweite Datei pflegen. */ .rd .rd-lauf-weiss { filter: brightness(0) invert(1); } /* Das Pluszeichen der FAQ kippt beim Öffnen zum Minus. */ .rd details[open] > .an-sum .rd-faq-zeichen { transform: rotate(45deg); } .rd details[open] > .an-sum .rd-faq-nr { color: #2FD3C9; } @media (max-width: 900px) { .rd .rd-faq-raster { grid-template-columns: 1fr; gap: 26px; } .rd .rd-faq-raster > div:first-child { position: static; } .rd .rd-zwei { grid-template-columns: 1fr; } } /* ── Mobil ────────────────────────────────────────────────────────────────── Die Seiten setzen ihre Raster als inline-style, und ein inline-style schlägt jede Medienabfrage. Deshalb greift hier der Attributselektor: alles, was sich selbst in Spalten legt, fällt auf schmalen Schirmen auf eine Spalte zurück. Ohne das schrumpfen die Videos in den zweispaltigen Blöcken auf Briefmarken. */ @media (max-width: 900px) { .rd [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Logo- und Kennzahlenleisten dürfen zweispaltig bleiben, einspaltig werden sie endlos. */ .rd [style*="repeat(5"], .rd [style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } .rd [style*="padding:0 56px"], .rd [style*="padding: 0 56px"], .rd [style*="padding:64px 56px"], .rd [style*="padding: 64px 56px"], .rd [style*="padding:52px 56px"], .rd [style*="padding: 52px 56px"], .rd [style*="padding:56px"], .rd [style*="padding: 56px"] { padding-left: 20px !important; padding-right: 20px !important; } .rd [style*="height:620px"], .rd [style*="height: 620px"], .rd [style*="height:670px"], .rd [style*="height: 670px"] { height: auto !important; min-height: 76vh; } .rd [style*="font-size:48px"], .rd [style*="font-size: 48px"], .rd [style*="font-size:46px"], .rd [style*="font-size: 46px"] { font-size: 28px !important; } .rd [style*="font-size:30px"], .rd [style*="font-size: 30px"], .rd [style*="font-size:32px"], .rd [style*="font-size: 32px"] { font-size: 23px !important; } /* Absolut gesetzte Textspalten über einem Bild: mobil in den Fluss zurückholen. */ .rd [style*="position:absolute;top:0;right:0;bottom:0"], .rd [style*="position: absolute;top:0;right:0;bottom:0"] { position: static !important; width: auto !important; padding: 24px 20px !important; } } /* ── Mobilmenü ────────────────────────────────────────────────────────────── Ohne dieses Menü führte auf schmalen Schirmen kein Weg mehr zu den Unterseiten: die Navigation war schlicht ausgeblendet. */ .rd .rd-burger { display: none; background: none; border: 1px solid rgba(47, 211, 201, .35); border-radius: 3px; padding: 9px 11px; cursor: pointer; line-height: 0; } .rd .rd-burger span { display: block; width: 19px; height: 2px; background: #E8EFF6; border-radius: 2px; transition: transform .22s, opacity .22s; } .rd .rd-burger span + span { margin-top: 4px; } .rd .rd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .rd .rd-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .rd .rd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 900px) { .rd .rd-burger { display: inline-block; } .rd a.rd-btn.rd-nav-mobil { display: none; } /* Aufgeklappt liegt das Menü unter der Leiste, nicht daneben. */ .rd .rd-nav-links.rd-offen { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #16222F; border-bottom: 1px solid rgba(47, 211, 201, .16); padding: 8px 20px 16px; font-size: 15px; } .rd .rd-nav-links.rd-offen a { padding: 13px 2px; border-bottom: 1px solid rgba(232,239,246,.08); } .rd .rd-nav-links.rd-offen a.rd-btn { margin-top: 14px; justify-content: center; border-bottom: 0; } } @media (max-width: 900px) { /* Nebeneinander gesetzte Kennzahlen und Knöpfe müssen umbrechen dürfen, sonst schieben sie die ganze Seite nach rechts. */ .rd [style*="display:flex"], .rd [style*="display: flex"]:not(.rd-lauf):not(.rd-lauf-spur):not(.rd-lauf-gruppe) { flex-wrap: wrap; } .rd [style*="white-space:nowrap"], .rd [style*="white-space: nowrap"] { white-space: normal !important; } /* Breite Seitenränder aus dem Entwurf fressen sonst den halben Bildschirm. */ .rd [style*="margin:72px 56px"], .rd [style*="margin: 72px 56px"], .rd [style*="margin:56px"], .rd [style*="margin: 56px"], .rd [style*="margin:64px 56px"], .rd [style*="margin: 64px 56px"] { margin-left: 16px !important; margin-right: 16px !important; } .rd [style*="padding:44px 48px"], .rd [style*="padding: 44px 48px"], .rd [style*="padding:34px 36px"], .rd [style*="padding: 34px 36px"], .rd [style*="padding:26px 34px"], .rd [style*="padding: 26px 34px"] { padding-left: 20px !important; padding-right: 20px !important; } }