/* ============================================================ Schrift — selbst gehostet, kein fremder Server im Ladepfad Eine variable Datei deckt 400 bis 900 ab. Das spart Anfragen und macht jedes Gewicht dazwischen verfügbar. ============================================================ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/inter-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; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/inter-latin-ext.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; } /* ============================================================ ClipReverb — Fundament Farben, Typo, Raster, Grundbausteine. Keine Bilddateien: jede Fläche entsteht aus Farbe, Verlauf oder Inline-SVG. ============================================================ */ :root { /* --- Marke ------------------------------------------------ Akzent ist bewusst kein Ombrie-Blau. Warmes Orange auf fast-schwarzer Schrift, viel Weiß dazwischen. */ --accent: #e5622a; /* Flächen, Verläufe, Zeichnungen */ --accent-text: #b64012; /* Akzent als SCHRIFT — #e5622a reicht nicht (3,4:1) */ --accent-btn: #bf4a1a; /* Knopfgrund, damit weiße Schrift darauf 4,99:1 erreicht */ --on-accent: #ffffff; /* Schrift auf Akzentgrund */ --accent-deep: #b64012; --accent-soft: #fdf0e9; --accent-rgb: 229, 98, 42; --ink: #141418; --ink-2: #3a3a44; --muted: #65656f; --faint: #696973; /* war #9a9aa4 — nur 2,8:1 auf Weiß */ --bg: #ffffff; --surface: #f7f7f9; --surface-2: #f1f1f4; --card: #ffffff; --line: #e7e7ec; --line-strong: #d6d6de; --ok: #1f7a41; --warn: #9a6114; --bad: #b3261e; --shadow-sm: 0 1px 2px rgba(20, 20, 24, .05), 0 2px 8px -4px rgba(20, 20, 24, .08); --shadow-md: 0 12px 32px -18px rgba(20, 20, 24, .22); --shadow-lg: 0 28px 64px -28px rgba(20, 20, 24, .28); --shadow-accent: 0 14px 34px -14px rgba(var(--accent-rgb), .45); --header-bg: rgba(255, 255, 255, .78); --glass: rgba(255, 255, 255, .62); --glass-line: rgba(var(--accent-rgb), .14); --grid-line: rgba(20, 20, 24, .05); --ring-line: rgba(var(--accent-rgb), .16); --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-full: 999px; --wrap: 1280px; --gutter: 48px; --header-h: 70px; --announce-h: 0px; --ease: cubic-bezier(.2, .8, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; color-scheme: light; } /* --- Dunkelmodus ------------------------------------------- Wird über data-theme="dark" am gesetzt. Ohne eigene Wahl entscheidet das System (Block weiter unten). */ :root[data-theme="dark"] { --accent: #ff7a42; --accent-text: #ff7a42; --accent-btn: #ff7a42; --on-accent: #141418; /* dunkle Schrift auf hellem Orange: 7,1:1 statt 2,6:1 */ --accent-deep: #e5622a; --accent-soft: #2a1710; --accent-rgb: 255, 122, 66; --ink: #f2f2f5; --ink-2: #c9c9d2; --muted: #9a9aa6; --faint: #888894; --bg: #0e0e12; --surface: #14141a; --surface-2: #1a1a22; --card: #16161d; --line: #262630; --line-strong: #33333f; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5); --shadow-md: 0 12px 32px -18px rgba(0, 0, 0, .7); --shadow-lg: 0 28px 64px -28px rgba(0, 0, 0, .8); --header-bg: rgba(14, 14, 18, .78); --glass: rgba(255, 255, 255, .045); --glass-line: rgba(var(--accent-rgb), .2); --grid-line: rgba(255, 255, 255, .045); --ring-line: rgba(var(--accent-rgb), .2); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #ff7a42; --accent-text: #ff7a42; --accent-btn: #ff7a42; --on-accent: #141418; /* dunkle Schrift auf hellem Orange: 7,1:1 statt 2,6:1 */ --accent-deep: #e5622a; --accent-soft: #2a1710; --accent-rgb: 255, 122, 66; --ink: #f2f2f5; --ink-2: #c9c9d2; --muted: #9a9aa6; --faint: #888894; --bg: #0e0e12; --surface: #14141a; --surface-2: #1a1a22; --card: #16161d; --line: #262630; --line-strong: #33333f; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px -4px rgba(0, 0, 0, .5); --shadow-md: 0 12px 32px -18px rgba(0, 0, 0, .7); --shadow-lg: 0 28px 64px -28px rgba(0, 0, 0, .8); --header-bg: rgba(14, 14, 18, .78); --glass: rgba(255, 255, 255, .045); --glass-line: rgba(var(--accent-rgb), .2); --grid-line: rgba(255, 255, 255, .045); --ring-line: rgba(var(--accent-rgb), .2); color-scheme: dark; } } /* ============================================================ Zurücksetzen ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--announce-h) + 24px); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; overflow-x: hidden; } /* Farbwechsel beim Umschalten weich, aber kurz */ body, .card, .header, .footer { transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease); } h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; font-optical-sizing: auto; } h1 { font-size: clamp(42px, 6.4vw, 86px); letter-spacing: -.042em; } h2 { font-size: clamp(32px, 4.2vw, 56px); } h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.02em; line-height: 1.2; } h4 { font-size: 18px; letter-spacing: -.015em; line-height: 1.3; } p { margin: 0; } p + p { margin-top: 1em; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } svg { display: block; } img, video { max-width: 100%; } ul, ol { margin: 0; padding: 0; list-style: none; } strong { color: var(--ink); font-weight: 650; } ::selection { background: rgba(var(--accent-rgb), .22); color: var(--ink); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .tabnum { font-variant-numeric: tabular-nums; } /* Nur für Screenreader */ .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -100px; z-index: 200; background: var(--card); color: var(--ink); padding: 12px 18px; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: var(--shadow-md); transition: top .2s var(--ease); } .skip:focus { top: 16px; } /* ============================================================ Raster ============================================================ */ .wrap { width: min(var(--wrap), calc(100% - var(--gutter) * 2)); margin-inline: auto; } .wrap-narrow { width: min(820px, calc(100% - var(--gutter) * 2)); margin-inline: auto; } section { position: relative; } .sec { padding-block: clamp(72px, 9vw, 132px); } .sec-tight { padding-block: clamp(52px, 6vw, 84px); } .sec-surface { background: var(--surface); } /* Haarlinie zwischen Sektionen, die in der Mitte am kräftigsten ist */ .sec-line::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent); } .grid { display: grid; gap: 24px; } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { :root { --gutter: 22px; } .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); } body { font-size: 16px; } } /* ============================================================ Sektionskopf ============================================================ */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 18px; } /* Der kleine Nachhall-Punkt vor jedem Eyebrow — drei Ringe, die nach außen laufen. Das Markenmotiv im Kleinstformat. */ .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .5); animation: cr-ping 2.6s var(--ease-out) infinite; } .sec-head { max-width: 680px; margin-bottom: clamp(38px, 5vw, 62px); } .sec-head.center { max-width: 760px; margin-inline: auto; text-align: center; } .sec-head.center .eyebrow { justify-content: center; } .sec-head p { margin-top: 18px; font-size: clamp(17px, 1.5vw, 19.5px); color: var(--muted); max-width: 60ch; } .sec-head.center p { margin-inline: auto; } .lead { font-size: clamp(18px, 1.8vw, 21px); color: var(--muted); line-height: 1.5; } /* ============================================================ Knöpfe ============================================================ */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: var(--r-full); font-size: 15.5px; font-weight: 620; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .btn-primary { background: var(--accent-btn); color: var(--on-accent); box-shadow: var(--shadow-accent); } .btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } /* Lichtstreif wandert beim Überfahren einmal durch */ .btn-primary::after { content: ""; position: absolute; inset: 0; left: -140%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent); transition: left .6s var(--ease); } .btn-primary:hover::after { left: 140%; } .btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); background: var(--card); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); } .btn-plain { color: var(--ink); padding-inline: 4px; } .btn-plain:hover { color: var(--accent-text); } .btn-plain .chev { transition: transform .2s var(--ease); } .btn-plain:hover .chev { transform: translateX(4px); } .btn-lg { padding: 17px 30px; font-size: 16.5px; } .btn-sm { padding: 10px 17px; font-size: 14px; } .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } /* ============================================================ Karte ============================================================ */ .card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 30px; } .card-pad-sm { padding: 22px; } .card-hover { transition: transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease); } .card-hover:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .3); box-shadow: var(--shadow-md); } .card h3 { margin-bottom: 10px; } .card p { color: var(--muted); font-size: 15.5px; line-height: 1.55; } /* Glaskarte mit wanderndem Lichthof (siehe motion.css) */ .glass { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } .pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-full); background: var(--accent-soft); color: var(--accent-deep); font-size: 12.5px; font-weight: 650; letter-spacing: -.005em; } :root[data-theme="dark"] .pill { color: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill { color: var(--accent); } } .pill-neutral { background: var(--surface-2); color: var(--muted); } /* Zahl, die eine Sektion trägt */ .stat-num { font-size: clamp(38px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.04em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .stat-label { margin-top: 10px; font-size: 14.5px; color: var(--muted); } /* ============================================================ Kopfzeile ============================================================ */ .header { position: fixed; inset-inline: 0; top: var(--announce-h); z-index: 90; height: var(--header-h); background: var(--header-bg); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 20px -8px rgba(0, 0, 0, .12); } .header-in { height: 100%; display: flex; align-items: center; gap: 30px; } .logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 750; letter-spacing: -.028em; font-size: 18.5px; color: var(--ink); } .logo-mark { width: 30px; height: 30px; flex: none; } .logo b { font-weight: 800; color: var(--accent-text); } .nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .nav-link { position: relative; padding: 9px 13px; border-radius: var(--r-sm); font-size: 14.5px; font-weight: 550; color: var(--ink-2); transition: color .18s var(--ease), background-color .18s var(--ease); } .nav-link:hover { color: var(--ink); background: var(--surface-2); } .nav-link[aria-current="page"] { color: var(--accent-text); } .header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Aufklappbares Menü in der Kopfzeile */ .nav-drop { position: relative; } .nav-panel { position: absolute; top: calc(100% + 10px); left: -10px; min-width: 480px; padding: 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; opacity: 0; visibility: hidden; transform: translateY(-6px); /* Gleicher Grund wie beim Mobilmenue: Sichtbarkeit haengt nicht am Uebergang, nur die Bewegung tut es. */ transition: transform .2s var(--ease); } .nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel { opacity: 1; visibility: visible; transform: none; } .nav-item { display: block; padding: 11px 13px; border-radius: var(--r-sm); transition: background-color .15s var(--ease); } .nav-item:hover { background: var(--surface); } .nav-item b { display: block; font-size: 14.5px; font-weight: 650; color: var(--ink); margin-bottom: 2px; } .nav-item span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; } .icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--r-full); border: 1px solid var(--line); color: var(--ink-2); background: var(--card); transition: color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .icon-btn:hover { color: var(--accent-text); border-color: var(--accent); } .burger { display: none; } @media (max-width: 1080px) { .nav, .header-end .btn-ghost { display: none; } .burger { display: grid; } } /* Mobiles Menü */ .mobile-nav { position: fixed; inset: calc(var(--header-h) + var(--announce-h)) 0 0; z-index: 89; background: var(--bg); padding: 26px var(--gutter) 60px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); /* Bewusst NUR transform mit Uebergang. Wuerde auch die Deckkraft ueberblenden, haette ein haengender Uebergang ein unsichtbares Menue bei gesperrter Seite zur Folge — der Nutzer saesse fest. */ transition: transform .25s var(--ease); } .mobile-nav.is-open { opacity: 1; visibility: visible; transform: none; } /* :not(.btn) ist wichtig — sonst faerbt diese Regel den Aufruf-Knopf im Menue dunkel ein und er verliert seinen Kontrast. */ .mobile-nav a:not(.btn) { display: block; padding: 15px 0; font-size: 19px; font-weight: 620; color: var(--ink); border-bottom: 1px solid var(--line); } .mobile-nav a:not(.btn):hover { color: var(--accent-text); } .mobile-nav .m-group { margin-top: 26px; font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 700; } /* ============================================================ Fußzeile ============================================================ */ .footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 66px 34px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; } .footer h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 15px; } .footer li + li { margin-top: 10px; } .footer li a { font-size: 14.5px; color: var(--muted); transition: color .15s var(--ease); } .footer li a:hover { color: var(--accent-text); } .footer-note { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; font-size: 13.5px; color: var(--faint); } .footer-intro { max-width: 34ch; margin-top: 16px; font-size: 14.5px; color: var(--muted); } @media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ============================================================ Hilfsklassen ============================================================ */ .mt-0 { margin-top: 0; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 18px; } .mt-4 { margin-top: 26px; } .mt-5 { margin-top: 38px; } .mt-6 { margin-top: 54px; } .center { text-align: center; } .muted { color: var(--muted); } .faint { color: var(--faint); } .accent { color: var(--accent-text); } .small { font-size: 14px; } .xs { font-size: 12.5px; } .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 10px; } .gap-3 { gap: 18px; } /* ============================================================ Ankündigungsleiste Liegt über der Kopfzeile und schiebt sie nach unten. Wer sie schließt, bekommt sie nicht wieder — gemerkt im Browser. ============================================================ */ :root.has-announce { --announce-h: 40px; } .announce { display: none; } :root.has-announce .announce { position: fixed; inset-inline: 0; top: 0; z-index: 96; display: flex; height: 40px; align-items: center; background: var(--ink); color: #fff; font-size: 13.5px; } :root[data-theme="dark"] .announce { background: var(--accent); color: #141418; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .announce { background: var(--accent); color: #141418; } } .announce-in { display: flex; align-items: center; gap: 12px; width: min(var(--wrap), calc(100% - var(--gutter) * 2)); } .announce p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .announce a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 620; white-space: nowrap; opacity: .9; } .announce a:hover { opacity: 1; } .announce button { margin-left: auto; color: inherit; opacity: .6; padding: 6px; display: grid; place-items: center; transition: opacity .18s var(--ease); } .announce button:hover { opacity: 1; } .announce-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } :root[data-theme="dark"] .announce-dot { background: #141418; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .announce-dot { background: #141418; } } @media (max-width: 720px) { .announce a { display: none; } }