/* ============================================================ Roadex UG — roadex.eu Gemeinsames Stylesheet für alle Seiten (Onepager + Rechtsseiten). Neutrale Haus-Palette rahmt zwei gleichberechtigte App-Kacheln. Schriften lokal selbst gehostet (Datenschutz + Performance). ============================================================ */ /* ---------------------------- Fonts (self-hosted) ---------------------------- */ /* Inter (variabel, Gewichte 400–600) — latin */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Inter — latin-ext */ @font-face{ font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap; src:url('../fonts/inter-var-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Bricolage Grotesque 700 — latin */ @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap; src:url('../fonts/bricolage-grotesque-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Bricolage Grotesque 700 — latin-ext */ @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-stretch:100%;font-display:swap; src:url('../fonts/bricolage-grotesque-700-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ---------------------------- Tokens ---------------------------- */ :root{ color-scheme:light; /* Neutrale Haus-Palette */ --ink:#1C2A3A; --text:#243240; --muted:#5B6B7B; --bg:#FFFFFF; --soft:#F4F6F8; --line:#E2E7EC; --accent:#2E4A6B; --accent-weak:#E8ECF4; /* Produkt-Akzente — ausschließlich in den jeweiligen Kacheln */ --roadex-navy:#2A3E83; --roadex-navy-deep:#222F63; --sbx-green:#2B5A40; --sbx-green-deep:#23392B; --sbx-gold:#8F5E05; --sbx-sand:#F2F0E8; /* Dunkler Footer — kontrastsichere Sekundärtöne */ --on-ink:#C7D2DE; --on-ink-strong:#DCE4EC; --on-ink-dim:#97A7B8; /* Flächen-Ebenen & theme-bezogene Tokens (Light-Defaults; im Dark unten überschrieben) */ --card:#FFFFFF; --footer-bg:#1C2A3A; --header-bg:#FFFFFF; --tile-hover-border:#D2D9E0; --rule-strong:#1C2A3A; --sbx-link:#2B5A40; --sbx-ring:rgba(43,90,64,.14); --theme-color:#1C2A3A; /* ≈5:1 auf --ink (AA) */ --maxw:1140px; --maxw-prose:760px; --r-lg:20px; --r-md:14px; --r-sm:10px; --shadow-1:0 1px 2px rgba(28,42,58,.05), 0 6px 18px rgba(28,42,58,.06); --shadow-2:0 2px 4px rgba(28,42,58,.06), 0 18px 40px rgba(28,42,58,.14); --ease:cubic-bezier(.2,.7,.2,1); } /* ============================================================ Dark Mode — System (@media prefers-color-scheme) + manueller Override (data-theme am ). Manuell schlägt System. Token-Werte WCAG-AA-geprüft (Fließtext ≥4.5:1). ============================================================ */ :root[data-theme="dark"]{ color-scheme:dark; --ink:#E8EDF3; --text:#C9D4DF; --muted:#99A8B9; --bg:#101A26; --soft:#18242F; --card:#1E2D3D; --line:#2A3947; --accent:#74A4D8; --accent-weak:#20344A; --footer-bg:#0C141E; --header-bg:#101A26; --tile-hover-border:#3A4C5E; --rule-strong:#46596C; --sbx-link:#5DBE86; --sbx-ring:rgba(93,190,134,.22); --theme-color:#101A26; --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.45); --shadow-2:0 2px 4px rgba(0,0,0,.40), 0 18px 44px rgba(0,0,0,.60); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ color-scheme:dark; --ink:#E8EDF3; --text:#C9D4DF; --muted:#99A8B9; --bg:#101A26; --soft:#18242F; --card:#1E2D3D; --line:#2A3947; --accent:#74A4D8; --accent-weak:#20344A; --footer-bg:#0C141E; --header-bg:#101A26; --tile-hover-border:#3A4C5E; --rule-strong:#46596C; --sbx-link:#5DBE86; --sbx-ring:rgba(93,190,134,.22); --theme-color:#101A26; --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.45); --shadow-2:0 2px 4px rgba(0,0,0,.40), 0 18px 44px rgba(0,0,0,.60); } } /* ---------------------------- Reset / Base ---------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:clamp(1rem, .96rem + .2vw, 1.06rem); line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3{ font-family:"Bricolage Grotesque", "Inter", sans-serif; font-weight:700; color:var(--ink); line-height:1.08; letter-spacing:-.015em; margin:0; } p{ margin:0; } img{ max-width:100%; height:auto; } a{ color:var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; text-underline-offset:3px; } a:focus-visible, button:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:4px; } .skip-link{ position:absolute; left:14px; top:-60px; background:var(--footer-bg); color:#fff; padding:10px 16px; border-radius:8px; z-index:50; transition:top .2s var(--ease); } .skip-link:focus{ top:14px; text-decoration:none; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px, 5vw, 40px); } .section{ padding-block:clamp(56px, 8vw, 104px); } .eyebrow{ font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:0; } /* ---------------------------- Haus-Marke ---------------------------- */ /* Quadrat, diagonal geteilt = zwei Apps unter einem Dach (neutral, nicht das R-App-Icon) */ .house-mark{ width:24px; height:24px; border-radius:7px; overflow:hidden; flex:0 0 auto; background:url('../img/favicon.svg') center/cover no-repeat; } .wordmark{ font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:1.32rem; letter-spacing:-.02em; color:var(--ink); line-height:1; } /* ---------------------------- Header ---------------------------- */ .site-header{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:var(--header-bg); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; } .brand{ display:inline-flex; align-items:center; gap:11px; } .header-meta{ display:flex; align-items:center; gap:18px; } .header-contact{ font-size:.92rem; font-weight:500; color:var(--muted); } .header-contact a{ color:var(--accent); } .lang-switch{ display:inline-flex; align-items:center; gap:7px; font-size:.9rem; font-weight:600; } .lang-switch a{ color:var(--muted); } .lang-switch a:hover{ color:var(--accent); text-decoration:none; } .lang-switch [aria-current="true"]{ color:var(--ink); } .lang-switch .sep{ color:var(--line); font-weight:400; } .header-meta .lang-switch{ padding-left:18px; border-left:1px solid var(--line); } @media (max-width:560px){ .header-contact{ display:none; } .header-meta .lang-switch{ padding-left:0; border-left:0; } } /* ---------------------------- Hero ---------------------------- */ .hero{ padding-block:clamp(52px, 8vw, 92px) clamp(20px, 4vw, 40px); } .hero .eyebrow{ margin-bottom:18px; } .hero h1{ font-size:clamp(2rem, 1.2rem + 3.6vw, 3.5rem); max-width:18ch; font-variation-settings:"opsz" 36; } .hero .subline{ margin-top:22px; max-width:62ch; font-size:clamp(1.05rem, 1rem + .5vw, 1.22rem); color:var(--text); } /* ---------------------------- Sektions-Kopf ---------------------------- */ .sec-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(28px,4vw,44px); } .sec-head h2{ font-size:clamp(1.45rem, 1.2rem + 1.2vw, 2.05rem); } .sec-head .count{ font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:.04em; font-variant-numeric:tabular-nums; padding-bottom:.2em; } .sec-head::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); align-self:center; min-width:24px; } /* ---------------------------- Signature: Kacheln ---------------------------- */ .tiles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px, 3vw, 30px); } @media (max-width:780px){ .tiles{ grid-template-columns:1fr; } } .tile{ position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); } .tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-2); border-color:var(--tile-hover-border); } .tile:focus-within{ box-shadow:var(--shadow-2); border-color:var(--accent); } .tile__field{ position:relative; min-height:180px; display:grid; place-items:center; padding:28px; overflow:hidden; } /* Roadex-Feld: Navy + weißes R, dezente Straßen-/Sprechblasen-Motive */ .field--roadex{ background:var(--roadex-navy); } /* Echtes App-Logo (weiß, transparent) zentriert im Farbfeld */ .app-logo{ height:100px; width:auto; filter:drop-shadow(0 6px 22px rgba(0,0,0,.22)); } /* Schatzbox-Feld: tiefes Grün + Gold-Kompass, dezente Höhenlinien */ .field--schatzbox{ background:var(--sbx-green); } .compass{ position:relative; width:100px; height:100px; border-radius:50%; display:grid; place-items:center; background:var(--sbx-green-deep); border:2px solid var(--sbx-sand); box-shadow:0 8px 24px rgba(0,0,0,.20); } .compass__needle{ width:14px; height:66px; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background:var(--sbx-gold); transform:rotate(22deg); } .compass__hub{ position:absolute; width:9px; height:9px; border-radius:50%; background:var(--sbx-sand); box-shadow:0 0 0 2px rgba(35,57,43,.4); } .compass__n{ position:absolute; top:6px; left:50%; transform:translateX(-50%); font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:.62rem; color:var(--sbx-sand); letter-spacing:.04em; } .tile__body{ padding:clamp(22px, 3vw, 30px); display:flex; flex-direction:column; gap:14px; flex:1 1 auto; } .tile__name{ font-size:clamp(1.4rem, 1.2rem + .9vw, 1.75rem); } .tile__meta{ display:inline-flex; align-items:center; gap:9px; font-size:.84rem; font-weight:500; color:var(--muted); letter-spacing:.01em; } .status-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:0 0 auto; box-shadow:0 0 0 3px var(--accent-weak); } .tile--schatzbox .status-dot{ background:var(--sbx-link); box-shadow:0 0 0 3px var(--sbx-ring); } .tile__text{ color:var(--text); max-width:46ch; } .tile__link{ margin-top:auto; display:inline-flex; align-items:center; gap:9px; align-self:flex-start; font-weight:600; font-size:.96rem; color:var(--accent); padding-top:6px; } .tile--schatzbox .tile__link{ color:var(--sbx-link); } .tile__link .arrow{ transition:transform .35s var(--ease); } .tile:hover .tile__link .arrow{ transform:translateX(5px); } .tile__link:hover{ text-decoration:none; } .tile__link:hover .label{ text-decoration:underline; text-underline-offset:3px; } /* Stretched-Link: ganze Kachel anklickbar, Fokus liegt auf dem Link */ .tile__link::after{ content:""; position:absolute; inset:0; } /* ---------------------------- Prinzipien ---------------------------- */ .principles{ background:var(--soft); border-block:1px solid var(--line); } .grid-3{ display:grid; gap:clamp(24px, 3vw, 38px); grid-template-columns:repeat(3, 1fr); } @media (max-width:860px){ .grid-3{ grid-template-columns:1fr; gap:0; } } .principle{ padding-top:22px; border-top:2px solid var(--rule-strong); } @media (max-width:860px){ .principle{ padding-block:26px; border-top:1px solid var(--line); } .principle:first-child{ border-top:2px solid var(--rule-strong); } } .principle .num{ font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:.9rem; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.02em; } .principle h3{ font-size:clamp(1.15rem, 1.05rem + .5vw, 1.32rem); margin-top:12px; margin-bottom:10px; } .principle p{ color:var(--muted); max-width:38ch; } /* ---------------------------- Kontakt ---------------------------- */ .contact__lead{ color:var(--muted); max-width:48ch; margin-bottom:20px; font-size:clamp(1rem, .96rem + .3vw, 1.12rem); } .contact .mail{ display:inline-block; font-family:"Bricolage Grotesque", sans-serif; font-weight:700; font-size:clamp(1.5rem, 1.1rem + 2.4vw, 2.4rem); color:var(--ink); letter-spacing:-.02em; } .contact .mail:hover{ color:var(--accent); text-decoration:none; } /* ---------------------------- Footer ---------------------------- */ .site-footer{ background:var(--footer-bg); color:var(--on-ink); padding-block:clamp(40px, 5vw, 60px); } .footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:24px; } .footer-brand{ display:inline-flex; align-items:center; gap:11px; } .footer-brand .house-mark{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); } .footer-brand .wordmark{ color:#fff; } .footer-nav{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; } .footer-nav a{ color:var(--on-ink); font-weight:500; font-size:.95rem; } .footer-nav a:hover{ color:#fff; } .footer-nav .lang-switch{ padding-left:22px; border-left:1px solid rgba(255,255,255,.16); } .footer-nav .lang-switch a{ color:var(--on-ink); } .footer-nav .lang-switch a:hover{ color:#fff; } .footer-nav .lang-switch [aria-current="true"]{ color:#fff; } .footer-nav .lang-switch .sep{ color:rgba(255,255,255,.3); } .footer-legal{ margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; gap:6px; } .footer-legal .line1{ color:var(--on-ink-strong); font-weight:500; } .footer-legal .line2{ color:var(--on-ink-dim); font-size:.88rem; } @media (max-width:560px){ .footer-nav{ gap:16px; } .footer-nav .lang-switch{ padding-left:0; border-left:0; width:100%; } } /* ---------------------------- Rechtsseiten / Prosa ---------------------------- */ .legal{ padding-block:clamp(44px, 6vw, 80px); } .legal .wrap{ max-width:var(--maxw-prose); } .legal .page-eyebrow{ margin-bottom:14px; } .legal h1{ font-size:clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem); margin-bottom:.5em; } .legal h2{ font-family:"Bricolage Grotesque", sans-serif; font-weight:700; color:var(--ink); font-size:clamp(1.2rem, 1.05rem + .6vw, 1.45rem); line-height:1.2; margin-top:2.2em; margin-bottom:.5em; letter-spacing:-.01em; } .legal h3{ font-size:1.05rem; margin-top:1.6em; margin-bottom:.35em; } .legal p, .legal li{ color:var(--text); max-width:70ch; } .legal p{ margin-bottom:1.05em; } .legal ul{ margin:0 0 1.05em; padding-left:1.25em; } .legal li{ margin-bottom:.5em; } .legal a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .legal .lead{ color:var(--muted); font-size:1.08rem; margin-bottom:2em; } .legal .addr{ font-style:normal; line-height:1.7; } .legal .meta-updated{ margin-top:2.5em; color:var(--muted); font-size:.9rem; } .legal .backlink{ display:inline-flex; align-items:center; gap:8px; margin-top:2.5em; font-weight:600; font-size:.95rem; } /* ---------------------------- Theme-Toggle + Übergänge ---------------------------- */ /* Sanfter Wechsel beim Umschalten. Beim Laden kein Flash, weil das Theme schon im (vor dem Paint) gesetzt wird -> es gibt keinen vorherigen Zustand. */ body{ transition:background-color .3s ease, color .3s ease; } .site-header, .site-footer, .skip-link, .tile, .principles, .legal, .theme-toggle{ transition:background-color .3s ease, border-color .3s ease, color .25s ease; } a, h1, h2, h3, .mail, .num, .eyebrow, .count, .tile__meta{ transition:color .25s ease; } /* Toggle-Button: ohne JS ausgeblendet (System-Theme greift trotzdem via @media) */ .theme-toggle{ display:none; } html.js .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; flex:0 0 auto; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:8px; cursor:pointer; } .theme-toggle:hover{ color:var(--ink); border-color:var(--accent); background:var(--accent-weak); } .theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .theme-toggle .ti{ width:18px; height:18px; display:none; } .theme-toggle:not([data-theme-pref]) .ti-auto, .theme-toggle[data-theme-pref="system"] .ti-auto, .theme-toggle[data-theme-pref="light"] .ti-light, .theme-toggle[data-theme-pref="dark"] .ti-dark{ display:block; } /* ---------------------------- Motion / Reveal ---------------------------- */ html.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal.in{ opacity:1; transform:none; } html.js .reveal.d1{ transition-delay:.08s; } html.js .reveal.d2{ transition-delay:.16s; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html.js .reveal{ opacity:1 !important; transform:none !important; } .tile:hover{ transform:none; } } /* ---------------------------- Sprach-Hinweis-Banner ---------------------------- Wird per main.js eingeblendet, wenn die Gerätesprache nicht zur Seitensprache passt (Standard-Empfehlung Englisch). Haus-Tokens -> passt sich Dark-Mode an. Reine Klassen (kein Inline-Style) wegen strenger CSP (style-src 'self'). */ .lang-suggest{ position:fixed; inset-inline:0; bottom:0; z-index:80; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -2px 18px rgba(28,42,58,.12); } .lang-suggest__inner{ max-width:var(--maxw); margin:0 auto; padding:13px clamp(16px,4vw,32px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; } .lang-suggest__text{ margin:0; color:var(--text); font-size:.95rem; } .lang-suggest__actions{ display:flex; align-items:center; gap:8px; } .lang-suggest__btn{ display:inline-flex; align-items:center; border-radius:var(--r-sm); background:var(--ink); color:var(--bg); text-decoration:none; font-weight:600; font-size:.9rem; padding:9px 16px; transition:filter .2s var(--ease); } .lang-suggest__btn:hover{ filter:brightness(1.12); } .lang-suggest__dismiss{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; cursor:pointer; background:transparent; color:var(--muted); border-radius:50%; transition:background-color .2s var(--ease), color .2s var(--ease); } .lang-suggest__dismiss:hover{ color:var(--text); background:var(--soft); }