/* =================================================================== Music by Marvin — Stylesheet Gilt fuer die Startseite und die Rechtsseiten (Impressum, Datenschutz). Keine externen Ressourcen: alle drei Schriften liegen lokal, Icons sind Inline-SVG. =================================================================== */ /* ---- Schriften ------------------------------------------------------- musicbymarvinfont: Fliesstext, variabel 200–900 (siehe fonts/OFL.md). Anton/Oswald: Display-Schriften fuer Ueberschriften/Marke, ebenfalls selbst gehostet — keine Anfrage an fonts.googleapis.com. */ @font-face { font-family: "musicbymarvinfont"; src: url("/fonts/musicbymarvinfont-variable.woff2") format("woff2-variations"), url("/fonts/musicbymarvinfont-variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Anton"; src: url("/fonts/anton.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Oswald"; src: url("/fonts/oswald-variable.woff2") format("woff2-variations"), url("/fonts/oswald-variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; } /* ---- Farb-Tokens ------------------------------------------------------- Dark ist die Grundeinstellung (kein data-theme noetig). Ein Besuch ohne gespeicherte Wahl folgt prefers-color-scheme — das entscheidet app.js beim Laden per data-theme-Attribut auf , damit vor dem ersten Bild kein falsches Theme aufblitzt. */ :root { --bg: #000000; --fg: #f2f3f5; --muted: rgba(242, 243, 245, 0.62); --faint: rgba(242, 243, 245, 0.42); --line: rgba(255, 255, 255, 0.16); --line-soft: rgba(255, 255, 255, 0.08); --card: rgba(255, 255, 255, 0.05); --card-border: rgba(255, 255, 255, 0.1); --header-bg: rgba(0, 0, 0, 0.6); --modal-bg: #161618; --overlay: rgba(0, 0, 0, 0.75); --inv-bg: #f2f3f5; --inv-text: #141518; --scan-opacity: 0.3; --glow-opacity: 1; --scan-color: rgba(255, 255, 255, 0.045); --accent: oklch(0.6 0.22 27); --accent-strong: oklch(0.58 0.24 27); --header-h: 58px; --wrap: 1160px; /* Apple-artige durchgehende Ecken (Squircle/G2). Wird ignoriert, wo der Browser corner-shape nicht kennt -> normales border-radius als Fallback. */ --corner-shape: superellipse(2); } :root[data-theme="light"] { --bg: #ffffff; --fg: #15161a; --muted: rgba(21, 22, 26, 0.66); --faint: rgba(21, 22, 26, 0.46); --line: rgba(15, 15, 20, 0.16); --line-soft: rgba(15, 15, 20, 0.08); --card: rgba(15, 15, 20, 0.035); --card-border: rgba(15, 15, 20, 0.1); --header-bg: rgba(255, 255, 255, 0.75); --modal-bg: #ffffff; --overlay: rgba(20, 20, 20, 0.3); --inv-bg: #15161a; --inv-text: #ffffff; --scan-opacity: 0.05; --glow-opacity: 0.45; --scan-color: rgba(0, 0, 0, 0.04); } *, *::before, *::after { box-sizing: border-box; corner-shape: var(--corner-shape); } html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); /* overflow-x allein auf body reicht auf iOS Safari nicht: der Viewport bleibt trotzdem horizontal wischbar, wenn irgendein Kind ueber die Breite hinausragt. Erst html + body zusammen unterbinden das. */ overflow-x: hidden; max-width: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "musicbymarvinfont", "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; transition: background 300ms ease, color 300ms ease; } a { color: var(--fg); text-decoration: none; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } ::selection { background: oklch(0.55 0.22 27); color: #fff; } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; transition: top 140ms ease; } .skip:focus { top: 12px; color: var(--bg); } /* ---- Hintergrund ---------------------------------------------------- */ .glow, .scanlines { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity 300ms ease; } .glow { opacity: var(--glow-opacity); background: radial-gradient(58% 46% at 50% 26%, oklch(0.42 0.14 25 / 0.42), transparent 70%), radial-gradient(45% 40% at 80% 82%, oklch(0.36 0.12 12 / 0.3), transparent 70%); animation: drift 26s ease-in-out infinite; } .scanlines { opacity: var(--scan-opacity); background-image: repeating-linear-gradient(0deg, var(--scan-color) 0 1px, transparent 1px 3px); } @keyframes drift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d( 4%, 3%, 0) scale(1.12); } 100% { transform: translate3d(-4%, -2%, 0) scale(1); } } /* ---- Kopfzeile ----------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 14px clamp(16px, 4vw, 34px); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: var(--header-bg); border-bottom: 1px solid var(--line-soft); transition: background 300ms ease, border-color 300ms ease; } .brand { position: absolute; left: clamp(16px, 4vw, 34px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 9px; color: var(--fg); } .brand-mark-img { width: 20px; height: 20px; object-fit: contain; } .brand-mark-dark { display: none; } :root[data-theme="light"] .brand-mark-dark { display: block; } :root[data-theme="light"] .brand-mark-light { display: none; } .brand-name { font-family: "Anton", "Oswald", sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; } .site-nav { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 22px); font-size: clamp(11px, 2.3vw, 13px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .site-nav a { white-space: nowrap; } .nav-cta { padding: 8px 16px; border-radius: 999px; border: none; background: var(--inv-bg); color: var(--inv-text); font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; } .nav-cta:hover { background: var(--accent-strong); color: #fff; } .theme-toggle { position: absolute; right: clamp(16px, 4vw, 34px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; transition: border-color 200ms ease, background 200ms ease; opacity: 0; } .theme-toggle:hover { border-color: var(--accent); background: var(--card); } .theme-toggle svg { display: block; width: 18px; height: 18px; } .theme-toggle .icon-light { display: none; } :root[data-theme="light"] .theme-toggle .icon-dark { display: none; } :root[data-theme="light"] .theme-toggle .icon-light { display: block; } /* ---- Hero ------------------------------------------------------------- Der einzige Abschnitt, der bewusst den ganzen Bildschirm fuellt. */ .hero { position: relative; z-index: 10; overflow: hidden; text-align: center; /* svh = kleinstmoegliche Hoehe (Toolbar sichtbar) als Fallback fuer Browser ohne dvh; dvh folgt der tatsaechlichen Hoehe live, damit kein Rest der naechsten Section durchscheint, wenn Safaris Adressleiste beim Laden schon eingeklappt ist. */ height: 100vh; height: 100svh; height: 100dvh; } .hero-inner { position: absolute; top: 33%; left: 0; right: 0; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 32px); padding: 0 clamp(18px, 5vw, 24px); } .hero-title-group { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); } .eq { display: flex; align-items: flex-end; justify-content: center; gap: clamp(3px, 1vw, 8px); max-width: 560px; height: clamp(50px, 9vh, 90px); } .eq-col { display: flex; flex-direction: column-reverse; gap: clamp(1px, 0.5vw, 3px); flex: 1; max-width: 34px; min-width: 0; height: 100%; align-self: stretch; } .eq-cell { flex: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.05); transition: background 120ms linear, box-shadow 200ms linear; } :root[data-theme="light"] .eq-cell { background: rgba(0, 0, 0, 0.06); } .eq-cell[data-s="on"] { background: #f4f6f8; box-shadow: 0 0 10px rgba(255, 255, 255, 0.28); } :root[data-theme="light"] .eq-cell[data-s="on"] { background: #15161a; box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); } .eq-cell[data-s="peak"] { background: var(--accent-strong); box-shadow: 0 0 16px oklch(0.55 0.25 27 / 0.7); } :root[data-theme="light"] .eq-cell[data-s="peak"] { background: var(--accent-strong); box-shadow: 0 0 16px oklch(0.55 0.25 27 / 0.7); } h1 { margin: 0; font-family: "Anton", "Oswald", sans-serif; font-weight: 400; font-size: clamp(36px, 4.6vw, 52px); letter-spacing: 0; line-height: 1; text-transform: uppercase; } .hero-tagline { display: flex; align-items: center; gap: 8px; font-size: clamp(13px, 2vw, 17px); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); } .social { display: flex; align-items: center; gap: 16px; perspective: 800px; } .social a { display: flex; align-items: center; justify-content: center; width: clamp(54px, 8vh, 68px); height: clamp(54px, 8vh, 68px); border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transform: translateZ(0) scale(1); transition: transform 320ms cubic-bezier(0.16,1,0.3,1), box-shadow 320ms ease, border-color 200ms ease, color 200ms ease, background 200ms ease; } .social a:hover { border-color: oklch(0.66 0.24 27); color: var(--fg); background: var(--card); transform: translateZ(46px) scale(1.16); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } /* Cover-Marquee: laeuft von selbst, per Touch verschiebbar (app.js). */ .marquee-wrap { position: absolute; left: 0; right: 0; bottom: 33%; transform: translateY(50%); width: 100%; overflow: hidden; touch-action: pan-y; } .marquee-track { display: flex; align-items: center; height: clamp(110px, 22vh, 280px); width: max-content; gap: clamp(14px, 2.2vw, 26px); will-change: transform; backface-visibility: hidden; } .marquee-set { display: flex; align-items: center; height: 100%; gap: clamp(14px, 2.2vw, 26px); } .marquee-tile { position: relative; height: 100%; flex: none; } .marquee-tile.is-playable { cursor: pointer; } .marquee-tile img { display: block; height: 100%; width: auto; aspect-ratio: 1; object-fit: cover; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.14); } .marquee-tile button { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 999px; border: none; background: var(--accent-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 160ms ease; } .marquee-tile:hover button { opacity: 1; } /* ---- Abschnitte ----------------------------------------------------- Ab hier laeuft die Seite durch. Keine festen Hoehen, damit nichts abgeschnitten wird — vor allem nicht auf kleinen Displays. */ .section { position: relative; z-index: 10; min-height: 100svh; display: flex; align-items: center; padding: clamp(90px, 12vh, 120px) clamp(18px, 5vw, 24px) clamp(50px, 8vh, 80px); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; } .eyebrow { display: block; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .title { margin: 0; font-family: "Anton", "Oswald", sans-serif; font-weight: 400; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; } .lead { margin: 0; max-width: 680px; font-size: clamp(14px, 1.4vw, 18px); line-height: 1.7; color: var(--muted); text-wrap: pretty; } .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; } .tags li { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } /* ---- About ------------------------------------------------------------ */ #about { text-align: center; overflow: hidden; } .about-bg { position: absolute; inset: 0; z-index: 0; background-image: url("/assets/about-snow.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .about-fade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to bottom, transparent 0%, var(--bg) 100%); } .about-inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vh, 26px); } .about-synth { width: 100%; max-width: 620px; margin-top: clamp(20px, 3vh, 34px); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.06) inset; transform: perspective(1400px) rotateX(3deg); transition: transform 400ms ease; } .about-synth:hover { transform: perspective(1400px) rotateX(0deg) translateY(-4px); } .about-synth img { display: block; width: 100%; height: auto; } /* ---- Sequencer (schliesst About ab) ------------------------------------ */ .sequencer { position: relative; display: flex; align-items: center; gap: clamp(2px, 0.6vw, 6px); width: 100%; max-width: 480px; height: clamp(30px, 5vh, 44px); margin-top: clamp(22px, 4vh, 36px); } .seq-cell { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; } .seq-led { /* Bei so kleinen, runden LEDs macht die globale Squircle-Ecke (--corner-shape) sie eckig statt rund -- hier zurueck auf normale kreisrunde Ecken. */ corner-shape: round; width: 100%; max-width: 10px; aspect-ratio: 1; border-radius: 999px; transition: background 90ms linear, box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms linear; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.06); } :root[data-theme="light"] .seq-led { background: rgba(0, 0, 0, 0.045); } /* ---- Latest Release ----------------------------------------------------- */ .release-grid { width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: center; gap: clamp(32px, 6vw, 80px); } .release-poster { display: flex; justify-content: center; } .release-poster img { width: 100%; max-width: 560px; height: auto; max-height: 84vh; object-fit: contain; border-radius: 20px; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.4); } .release-info { display: flex; flex-direction: column; gap: clamp(14px, 2.2vh, 22px); text-align: left; } .release-info .lead { max-width: 480px; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.65; } .release-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; align-self: flex-start; } .release-link:hover { border-color: var(--accent); background: var(--card); color: var(--fg); } .release-link svg { flex: none; } .frame { border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35); } .frame--video { aspect-ratio: 16 / 9; margin-top: clamp(6px, 1.2vh, 12px); position: relative; } .frame iframe { display: block; border: 0; width: 100%; height: 100%; } /* Einwilligung sitzt direkt auf dem Video (kein seitenweiter Banner) — deckt den Frame exakt ab, Farben sind bewusst fest hell/dunkel statt Theme-Variablen, weil der Frame-Hintergrund immer schwarz bleibt. */ .consent-box { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: #0c0c0c; } .consent-box p { margin: 0; max-width: 300px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.65); } .consent-btn { padding: 10px 20px; border-radius: 999px; border: none; background: #fff; color: #111; font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; } .consent-btn:hover { background: var(--accent); color: #fff; } .release-audio { width: 100%; max-width: 480px; margin-top: clamp(4px, 1vh, 10px); } /* ---- Listen (Discography) ----------------------------------------------- */ .section-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin-bottom: clamp(16px, 2.6vh, 26px); } .section-link { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(16px, 2.4vw, 24px); } .track-card { display: flex; flex-direction: column; gap: 12px; border-radius: 22px; overflow: hidden; border: 1px solid var(--card-border); background: var(--card); } .track-card:hover { border-color: oklch(0.6 0.22 27 / 0.6); } .track-cover { position: relative; aspect-ratio: 1; overflow: hidden; } .track-cover-img { width: 100%; height: 100%; background-size: cover; background-position: center; } .track-cover-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.18); opacity: 0; transition: opacity 200ms ease; } .track-card:hover .track-cover-overlay { opacity: 1; } .track-play { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 999px; border: none; background: var(--accent-strong); box-shadow: 0 0 20px rgba(0, 0, 0, 0.45); cursor: pointer; z-index: 2; } .track-play svg { width: 20px; height: 20px; } @media (max-width: 640px) { .track-play { width: 64px; height: 64px; } .track-play svg { width: 26px; height: 26px; } } .track-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px 14px; } .track-meta span { font-size: 15px; font-weight: 600; color: var(--fg); } .track-meta svg { flex: none; color: var(--faint); } a.track-soundcloud { display: flex; cursor: pointer; } a.track-soundcloud:hover svg { color: var(--accent-strong); } /* ---- Watch ----------------------------------------------------------- Bewusst fest dunkel, unabhaengig vom Theme-Toggle — hebt den Video-Bereich optisch vom Rest der Seite ab. */ #watch { overflow: hidden; background: #0a0a0c; color: #f4f2f0; } #watch::before, #watch::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; filter: blur(40px); } #watch::before { background: radial-gradient(55% 50% at 30% 30%, oklch(0.4 0.15 25 / 0.55), transparent 70%); animation: mbmWatchGradientRed 22s ease-in-out infinite; } #watch::after { background: radial-gradient(50% 45% at 75% 75%, oklch(0.32 0.12 250 / 0.45), transparent 70%); animation: mbmWatchGradientBlue 17s ease-in-out infinite; } #watch .wrap { position: relative; z-index: 1; } #watch .section-link { color: rgba(244, 242, 240, 0.55); } @keyframes mbmWatchGradientRed { 0%, 100% { transform: translate3d(-6%, -4%, 0) scale(1.1); opacity: 0.55; } 50% { transform: translate3d(6%, 4%, 0) scale(1.35); opacity: 1; } } @keyframes mbmWatchGradientBlue { 0%, 100% { transform: translate3d(5%, 5%, 0) scale(1.3); opacity: 0.5; } 50% { transform: translate3d(-5%, -5%, 0) scale(1.05); opacity: 1; } } .watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(16px, 2.4vw, 24px); width: 100%; } .watch-grid .frame { border-radius: 28px; } /* ---- Fusszeile ------------------------------------------------------ */ .site-footer { position: relative; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 28px clamp(18px, 5vw, 32px) 40px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--faint); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; } .site-footer a, .site-footer button { color: var(--faint); padding: 0; border: none; background: none; font: inherit; font-size: 13px; cursor: pointer; } .site-footer a:hover, .site-footer button:hover { color: var(--accent); } /* ---- Mini-Player --------------------------------------------------------- */ .mini-player { position: fixed; left: 50%; bottom: clamp(14px, 3vh, 26px); transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px); background: var(--header-bg); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border: 1px solid var(--card-border); border-radius: 999px; padding: 8px 10px 8px 8px; box-shadow: 0 0 32px rgba(0, 0, 0, 0.32); } .mini-player[hidden] { display: none; } .mini-player-cover { width: 44px; height: 44px; border-radius: 999px; background-size: cover; background-position: center; flex: none; } .mini-player-info { display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; max-width: clamp(70px, 34vw, 160px); } .mini-player-title { font-size: 13px; font-weight: 600; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); } .mini-progress { width: 100%; height: 3px; border-radius: 999px; background: #d4d4d8; overflow: hidden; } .mini-progress-fill { height: 100%; width: 0%; background: var(--accent-strong); border-radius: inherit; } .mini-player-controls { display: flex; align-items: center; gap: 4px; } .mini-player-controls button { display: flex; align-items: center; justify-content: center; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; } .mini-player-controls button:hover { color: var(--fg); } .mini-player-controls .play-pause { width: 40px; height: 40px; background: var(--accent-strong); color: #fff; } /* [hidden] auf wird nicht in jedem Browser zuverlaessig zu display:none (SVG-Elemente reagieren inkonsistent auf das hidden-Attribut) — deshalb hier explizit erzwungen, sonst zeigt der Play/Pause-Button kurzzeitig beide Icons uebereinander an. */ .mini-player-controls .play-pause svg[hidden] { display: none; } .mini-player-controls .prev, .mini-player-controls .next { width: 34px; height: 34px; } .mini-player-controls .close { width: 28px; height: 28px; margin-left: 4px; color: var(--faint); } /* ---- Modals (Kontakt, Impressum, Datenschutz) --------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center; padding: clamp(14px, 4vw, 40px); background: var(--overlay); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .modal-overlay[hidden] { display: none; } .modal { position: relative; width: 100%; max-width: 520px; padding: clamp(26px, 4vw, 42px); border-radius: 26px; border: 1px solid var(--card-border); background: var(--modal-bg); color: var(--fg); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5); } .modal--legal { max-width: 660px; max-height: 82vh; overflow-y: auto; } .modal-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; } .modal-close:hover { background: var(--card); color: var(--fg); } .modal h3 { margin: 8px 0 6px; font-family: "Anton", "Oswald", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 0; text-transform: uppercase; } .modal--legal h3 { font-size: 24px; margin: 0 0 20px; } .modal p.lead { margin: 0 0 20px; font-size: 14px; color: var(--muted); } .legal-body { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.7; color: var(--muted); } .legal-body p { margin: 0; white-space: pre-line; } .contact-form { display: flex; flex-direction: column; gap: 12px; } .contact-form input, .contact-form textarea { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 15px; outline: none; resize: vertical; font-family: inherit; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); } .contact-form button[type="submit"] { margin-top: 6px; padding: 15px 22px; border-radius: 999px; border: none; background: var(--inv-bg); color: var(--inv-text); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; } .contact-form button[type="submit"]:hover { background: var(--accent-strong); color: #fff; } .contact-form button[disabled] { opacity: 0.6; cursor: default; } .contact-status { margin: 0; font-size: 13px; line-height: 1.6; } .contact-status[data-state="error"] { color: oklch(0.62 0.22 27); } .contact-status[data-state="ok"] { color: oklch(0.62 0.19 150); } .cf-turnstile { margin-top: 2px; } /* ---- Einblenden beim Scrollen ---------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .9s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.is-in { opacity: 1; transform: none; } /* ---- Rechtsseiten (eigenstaendige Impressum/Datenschutz-Seiten) --------- */ .legal-page { position: relative; z-index: 10; max-width: 720px; margin: 0 auto; padding: calc(var(--header-h) + clamp(50px, 9vh, 90px)) clamp(18px, 5vw, 24px) clamp(60px, 9vh, 90px); } .legal-page h1 { font-family: "Anton", "Oswald", sans-serif; font-weight: 400; font-size: clamp(28px, 5vw, 46px); margin-bottom: 30px; text-transform: uppercase; } .legal-page h2 { margin: 38px 0 12px; font-size: 11px; letter-spacing: 0.28em; color: var(--accent); text-transform: uppercase; } .legal-page p, .legal-page li { font-size: 15px; line-height: 1.75; color: var(--muted); } .legal-page p { margin: 0 0 14px; } .legal-page ul { margin: 0 0 14px; padding-left: 20px; } .legal-page address { font-style: normal; } .legal-page a { text-decoration: underline; text-underline-offset: 3px; } .legal-page .back { display: inline-block; margin-top: 40px; font-size: 13px; } .notice { margin: 0 0 34px; padding: 18px 22px; border-radius: 16px; border: 1px solid oklch(0.55 0.18 27 / 0.5); background: oklch(0.38 0.12 27 / 0.18); } .notice p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); } .notice strong { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } /* ---- Schmale Displays -------------------------------------------------- */ @media (max-width: 640px) { .brand-name { display: none; } } @media (max-width: 560px) { .site-nav { gap: 14px; } .nav-cta { padding: 8px 14px; } } /* ---- Bewegung reduzieren ------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .glow { animation: none; } .eq-cell, .seq-led { transition: none; } .reveal { opacity: 1; transform: none; transition: none; } }