/* Theme Name: Mathias Blum Webdesign Description: Child Theme für GeneratePress. Onepager "Webdesign Insel Usedom" im dunklen Apple-Stil mit Gold aus dem Logo. Präfix mb-. Author: Mathias Blum Template: generatepress Version: 1.1.0 Text Domain: mb-webdesign */ /* CHANGELOG 1.1.0 Bewegung: Wort-für-Wort-Überschriften, Hero-Fenster richtet sich beim Scrollen auf, Prinzipien als festgepinnte Bühne, überlappende Abschnitte, Laufschrift, Schimmer und 3D-Neigung der Kacheln, magnetische Buttons, Cursor-Ring, Scroll-Fortschritt, Wortzeichen im Footer. Alles abschaltbar über "Bewegung reduzieren". 1.0.0 Erste Fassung: Onepager, Kopf mit Glas-Effekt, Bento-Raster, Vorgehen, Referenzen, FAQ, Kontakt, Footer, Rahmen für Impressum und Datenschutz. INHALT 1 Token 2 Grundlagen und GeneratePress-Anpassungen 3 Flächen und Überschriften 4 Buttons 5 Bewegung (Einblenden) 6 Kopf 7 Startseite: Hero und Vorschau-Fenster 8 Leistungen (Bento) 9 Prinzipien 10 Vorgehen 11 Referenzen 12 Über mich 13 FAQ 14 Kontakt und Formular 15 Footer 16 Rechtstexte (Impressum, Datenschutz) 17 Korrekturen 18 Bewegung (v1.1) */ /* 1 TOKEN ---------------------------------------------------------- */ :root { /* Rollen-Token (feste Werte, damit das Site Cockpit sie lesen kann) */ --mb-accent: #C9A25E; --mb-primary: #C9A25E; --mb-brand: #C9A25E; --mb-accent-hover: #E3C686; --mb-accent-text: #7A5A14; --mb-dark: #0D0F14; --mb-night: #0D0F14; --mb-ink: #1D1D1F; --mb-text: #1D1D1F; --mb-mist: #F5F5F7; --mb-soft: #F5F5F7; --mb-paper: #FBFBFD; --mb-bg: #FFFFFF; --mb-line: #D2D2D7; --mb-border: #D2D2D7; --mb-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mb-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Zusatztöne */ --mb-dark-2: #161922; --mb-dark-3: #1E222D; --mb-mute: #6E6E73; --mb-mute-dark: #A1A1A6; --mb-white-line: rgba(255, 255, 255, .12); /* Größen */ --fs-hero: clamp(2.6rem, 7vw, 5.4rem); --fs-h2: clamp(2rem, 5vw, 3.75rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-lead: clamp(1.1rem, 1.7vw, 1.4rem); --fs-body: 1.0625rem; --fs-small: .875rem; /* Layout */ --gutter: clamp(20px, 5vw, 40px); --mb-max: 1180px; --mb-sec: clamp(76px, 11vw, 148px); --mb-radius: 28px; --mb-radius-s: 18px; --mb-ease: cubic-bezier(.16, 1, .3, 1); --mb-slide: cubic-bezier(.7, 0, .2, 1); --mb-head: 64px; /* Symbole als Daten-SVG (per Maske in Textfarbe) */ --mb-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --mb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --mb-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); } /* 2 GRUNDLAGEN ------------------------------------------------------ */ .mb-page, .mb-page *, .mb-page *::before, .mb-page *::after, .mb-header, .mb-header *, .mb-header *::before, .mb-header *::after, .mb-footer, .mb-footer *, .mb-footer *::before, .mb-footer *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--mb-head) + 12px); } html.mb-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body.mb-fullpage { background: var(--mb-dark); margin: 0; overflow-x: clip; } html, body { overflow-x: clip; } /* GeneratePress: Standard-Kopf, Footer, Titel, Seitenleiste ausblenden, Inhalt Kante zu Kante */ body.mb-fullpage .site-header, body.mb-fullpage #site-navigation, body.mb-fullpage .site-footer, body.mb-fullpage #colophon, body.mb-fullpage .site-info, body.mb-fullpage .generate-back-to-top, body.mb-fullpage .entry-header, body.mb-fullpage .page-header, body.mb-fullpage #right-sidebar, body.mb-fullpage #left-sidebar { display: none !important; } body.mb-fullpage .site.grid-container, body.mb-fullpage .grid-container, body.mb-fullpage .site-content, body.mb-fullpage #page { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.mb-fullpage .site-content { display: block; } body.mb-fullpage #primary, body.mb-fullpage .content-area { width: 100% !important; float: none; margin: 0; padding: 0; } body.mb-fullpage .inside-article, body.mb-fullpage .entry-content, body.mb-fullpage .site-main { padding: 0 !important; margin: 0 !important; background: transparent; } body.mb-fullpage .separate-containers .inside-article { box-shadow: none; } body.mb-fullpage .entry-content > * { margin-bottom: 0; } .mb-page { font-family: var(--mb-font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--mb-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } .mb-page img { max-width: 100%; height: auto; display: block; } .mb-page a { color: inherit; } .mb-page p { margin: 0 0 1em; text-wrap: pretty; } .mb-page ul, .mb-page ol { margin: 0; padding: 0; list-style: none; } .mb-wrap { width: 100%; max-width: var(--mb-max); margin-inline: auto; padding-inline: var(--gutter); } .mb-center { text-align: center; } .mb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 3 FLÄCHEN UND ÜBERSCHRIFTEN --------------------------------------- */ .mb-sec { position: relative; padding-block: var(--mb-sec); } .mb-dark { background: var(--mb-dark); color: #F5F5F7; } .mb-light { background: var(--mb-mist); color: var(--mb-ink); } .mb-white { background: #fff; color: var(--mb-ink); } .mb-page h1, .mb-page h2, .mb-page h3, .mb-page h4 { font-family: var(--mb-font); color: inherit; margin: 0; font-weight: 700; overflow-wrap: normal; hyphens: manual; text-wrap: balance; } .mb-page h1.mb-h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.04em; } .mb-page h2.mb-h2 { font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.03em; } .mb-page h3.mb-h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.015em; font-weight: 650; } .mb-gold { color: var(--mb-accent); background: linear-gradient(100deg, #F0D9A6 0%, #C9A25E 45%, #A57F38 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mb-kicker { display: inline-flex; align-items: center; gap: .65em; font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-accent); margin-bottom: 1.1rem; } .mb-kicker::before { content: ""; width: 22px; height: 1.5px; background: currentColor; } .mb-light .mb-kicker, .mb-white .mb-kicker { color: var(--mb-accent-text); } .mb-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--mb-mute); max-width: 46ch; } .mb-dark .mb-lead { color: var(--mb-mute-dark); } .mb-head { max-width: 760px; margin-bottom: clamp(36px, 6vw, 72px); } .mb-head.mb-center { margin-inline: auto; } .mb-head .mb-lead { margin-top: 1.25rem; } .mb-head.mb-center .mb-lead { margin-inline: auto; } /* 4 BUTTONS --------------------------------------------------------- */ .mb-btn { --b-bg: var(--mb-accent); --b-fg: var(--mb-dark); --b-bd: var(--mb-accent); --b-hv: #fff; --b-hf: var(--mb-dark); --b-ib: var(--mb-dark); --b-if: var(--mb-accent); --b-ihb: var(--mb-accent); --b-ihf: var(--mb-dark); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 1rem; padding: .38rem .38rem .38rem 1.5rem; border: 1.5px solid var(--b-bd); border-radius: 999px; background: var(--b-bg); color: var(--b-fg); font-family: var(--mb-font); font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: color .5s var(--mb-slide), border-color .5s var(--mb-slide), transform .25s var(--mb-ease); } .mb-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-hv); transform: translateX(-102%); transition: transform .5s var(--mb-slide); } .mb-btn-t { position: relative; } .mb-btn-i { position: relative; overflow: hidden; flex: none; display: block; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--b-ib); color: var(--b-if); transition: background .5s var(--mb-slide), color .5s var(--mb-slide); } .mb-btn-i::before, .mb-btn-i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--mb-arrow) center / contain no-repeat; mask: var(--mb-arrow) center / contain no-repeat; transition: transform .5s var(--mb-slide); } .mb-btn-i::after { transform: translateX(-260%); } .mb-btn:hover, .mb-btn:focus-visible { color: var(--b-hf); border-color: var(--b-hv); } .mb-btn:hover::before, .mb-btn:focus-visible::before { transform: none; } .mb-btn:hover .mb-btn-i, .mb-btn:focus-visible .mb-btn-i { background: var(--b-ihb); color: var(--b-ihf); } .mb-btn:hover .mb-btn-i::before, .mb-btn:focus-visible .mb-btn-i::before { transform: translateX(260%); } .mb-btn:hover .mb-btn-i::after, .mb-btn:focus-visible .mb-btn-i::after { transform: none; } .mb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .mb-light .mb-btn:focus-visible, .mb-white .mb-btn:focus-visible { outline-color: var(--mb-ink); } .mb-btn:active { transform: scale(.97); } /* Varianten, jede nur auf passendem Grund */ .mb-btn-accent { /* auf dunkel und auf hell */ } .mb-btn-dark { /* nur auf hell */ --b-bg: var(--mb-dark); --b-fg: #fff; --b-bd: var(--mb-dark); --b-hv: var(--mb-accent); --b-hf: var(--mb-dark); --b-ib: var(--mb-accent); --b-if: var(--mb-dark); --b-ihb: var(--mb-dark); --b-ihf: var(--mb-accent); } .mb-btn-outline { /* nur auf dunkel */ --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .38); --b-hv: #fff; --b-hf: var(--mb-dark); --b-ib: rgba(255, 255, 255, .14); --b-if: #fff; --b-ihb: var(--mb-dark); --b-ihf: #fff; } .mb-btn-outline-dark { /* nur auf hell */ --b-bg: transparent; --b-fg: var(--mb-ink); --b-bd: rgba(29, 29, 31, .4); --b-hv: var(--mb-ink); --b-hf: #fff; --b-ib: rgba(29, 29, 31, .08); --b-if: var(--mb-ink); --b-ihb: var(--mb-accent); --b-ihf: var(--mb-dark); } .mb-btn-sm { padding: .3rem .3rem .3rem 1.15rem; font-size: .9rem; gap: .75rem; } .mb-btn-sm .mb-btn-i { width: 2.1rem; height: 2.1rem; } .mb-btn-sm .mb-btn-i::before, .mb-btn-sm .mb-btn-i::after { width: .9rem; height: .9rem; } .mb-actions { display: flex; flex-wrap: wrap; gap: 14px; } .mb-center .mb-actions, .mb-actions.mb-center { justify-content: center; } /* 5 BEWEGUNG -------------------------------------------------------- */ .mb-js [data-r] { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--mb-ease) var(--d, 0s), transform 1s var(--mb-ease) var(--d, 0s), rotate .5s var(--mb-ease), translate .5s var(--mb-ease), box-shadow .6s var(--mb-ease), border-color .4s, background .4s; } .mb-js [data-r="scale"] { transform: translateY(26px) scale(.92); } .mb-js [data-r="left"] { transform: translateX(-56px); } .mb-js [data-r="right"] { transform: translateX(56px); } .mb-js [data-r].is-in, .mb-show [data-r] { opacity: 1; transform: none; } @keyframes mb-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } @keyframes mb-glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mb-js [data-r] { opacity: 1; transform: none; transition: none; } .mb-btn, .mb-btn::before, .mb-btn-i, .mb-btn-i::before, .mb-btn-i::after { transition: none; } .mb-chip, .mb-hero::before { animation: none !important; } } /* 6 KOPF ------------------------------------------------------------ */ .mb-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--mb-head); color: #F5F5F7; font-family: var(--mb-font); } body.admin-bar .mb-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .mb-header { top: 46px; } } .mb-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(13, 15, 20, .66); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px); border-bottom: 1px solid var(--mb-white-line); transition: background .3s; } .mb-header.is-scrolled::before { background: rgba(13, 15, 20, .82); } .mb-header-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; max-width: var(--mb-max); margin-inline: auto; padding-inline: var(--gutter); } .mb-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; } .mb-brand-img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; box-shadow: 0 0 0 1px rgba(201, 162, 94, .35); } .mb-brand-t { display: flex; flex-direction: column; line-height: 1.1; } .mb-brand-t strong { font-size: .98rem; font-weight: 650; letter-spacing: -.01em; } .mb-brand-t small { font-size: .62rem; letter-spacing: .32em; text-transform: uppercase; color: var(--mb-accent); margin-top: 3px; } .mb-nav { display: flex; align-items: center; gap: 28px; } .mb-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .mb-menu li { margin: 0; } .mb-menu a { display: block; padding: 8px 14px; border-radius: 999px; font-size: .875rem; color: rgba(245, 245, 247, .78); text-decoration: none; transition: color .25s, background .25s; } .mb-menu a:hover, .mb-menu a:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); } .mb-menu a.is-active { color: var(--mb-accent); } .mb-menu a:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 2px; } .mb-burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; cursor: pointer; color: #fff; } .mb-burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .45s var(--mb-ease), top .45s var(--mb-ease); } .mb-burger span:nth-child(1) { top: 18px; } .mb-burger span:nth-child(2) { top: 25px; } .mb-header.is-open .mb-burger span:nth-child(1) { top: 21.5px; transform: rotate(45deg); } .mb-header.is-open .mb-burger span:nth-child(2) { top: 21.5px; transform: rotate(-45deg); } .mb-burger:focus-visible { outline: 2px solid var(--mb-accent); border-radius: 8px; } @media (max-width: 900px) { .mb-burger { display: block; } .mb-nav { position: fixed; top: var(--mb-head); left: 0; right: 0; height: calc(100dvh - var(--mb-head)); flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px; padding: 28px var(--gutter) 40px; overflow-y: auto; background: #0D0F14; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s var(--mb-ease), transform .45s var(--mb-ease), visibility 0s linear .45s; } body.admin-bar .mb-nav { top: calc(var(--mb-head) + 46px); height: calc(100dvh - var(--mb-head) - 46px); } .mb-header.is-open .mb-nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mb-menu { flex-direction: column; align-items: stretch; gap: 0; } .mb-menu a { padding: 16px 0; border-radius: 0; font-size: 1.75rem; font-weight: 650; letter-spacing: -.02em; color: #F5F5F7; border-bottom: 1px solid var(--mb-white-line); background: none !important; } .mb-nav-cta { align-self: flex-start; } } /* 7 HERO ------------------------------------------------------------ */ .mb-hero { position: relative; overflow: hidden; text-align: center; padding-top: calc(var(--mb-head) + clamp(56px, 10vw, 120px)); padding-bottom: 0; background: var(--mb-dark); color: #F5F5F7; } .mb-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(62% 52% at 50% 0%, rgba(201, 162, 94, .26), transparent 72%), radial-gradient(38% 38% at 88% 34%, rgba(92, 112, 180, .16), transparent 70%), radial-gradient(34% 34% at 8% 46%, rgba(201, 162, 94, .10), transparent 70%); animation: mb-glow 9s ease-in-out infinite; } .mb-hero .mb-wrap { position: relative; } .mb-hero .mb-kicker { margin-bottom: 1.5rem; } .mb-hero .mb-kicker::before { display: none; } .mb-hero .mb-h1 .mb-gold { display: block; padding-bottom: .1em; margin-top: .06em; font-size: .72em; letter-spacing: -.035em; } .mb-hero .mb-lead { margin: 1.6rem auto 0; max-width: 42ch; color: var(--mb-mute-dark); } .mb-hero .mb-actions { margin-top: 2.2rem; justify-content: center; } .mb-toc { margin-top: 2.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; } .mb-toc-l { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mb-mute-dark); margin-right: 6px; } .mb-toc a { padding: 7px 14px; border: 1px solid var(--mb-white-line); border-radius: 999px; font-size: .8125rem; color: #E5E5EA; text-decoration: none; transition: background .25s, border-color .25s, color .25s; } .mb-toc a:hover, .mb-toc a:focus-visible { background: rgba(201, 162, 94, .14); border-color: rgba(201, 162, 94, .55); color: #fff; } .mb-mock-wrap { position: relative; width: min(1000px, 100%); margin: clamp(44px, 7vw, 84px) auto 0; } .mb-mock { --tx: 0deg; --ty: 0deg; position: relative; border-radius: 22px 22px 0 0; overflow: hidden; background: linear-gradient(180deg, #1B1F2A, #12151C); border: 1px solid rgba(255, 255, 255, .14); border-bottom: 0; box-shadow: 0 -10px 80px rgba(201, 162, 94, .16), 0 40px 120px rgba(0, 0, 0, .55); transform: perspective(1800px) rotateX(calc((1 - var(--p, 0)) * 16deg + var(--ty))) rotateY(var(--tx)) scale(calc(.9 + var(--p, 0) * .12)); transform-origin: 50% 100%; transition: transform .35s var(--mb-ease); text-align: left; } .mb-mock-bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--mb-white-line); background: rgba(255, 255, 255, .03); } .mb-mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3A3F4B; } .mb-mock-bar i:nth-child(1) { background: #FF5F57; } .mb-mock-bar i:nth-child(2) { background: #FEBC2E; } .mb-mock-bar i:nth-child(3) { background: #28C840; } .mb-mock-url { margin: 0 auto; padding: 5px 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .75rem; color: var(--mb-mute-dark); letter-spacing: .02em; } .mb-mock-view { height: clamp(220px, 36vw, 400px); padding: clamp(18px, 3.4vw, 40px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); } .mb-mock-nav { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(18px, 3vw, 36px); } .mb-mock-nav b { width: 26px; height: 26px; border-radius: 8px; background: var(--mb-accent); } .mb-mock-nav span { height: 7px; width: clamp(28px, 6vw, 64px); border-radius: 4px; background: rgba(255, 255, 255, .16); } .mb-mock-nav span:first-of-type { margin-left: auto; } .mb-mock-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(16px, 4vw, 48px); align-items: center; } .mb-mock-lines span { display: block; height: clamp(12px, 2.4vw, 26px); border-radius: 8px; background: rgba(255, 255, 255, .88); margin-bottom: 12px; } .mb-mock-lines span:nth-child(1) { width: 92%; } .mb-mock-lines span:nth-child(2) { width: 64%; background: linear-gradient(100deg, #F0D9A6, #C9A25E, #A57F38); } .mb-mock-lines em { display: block; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); margin: 9px 0; width: 78%; } .mb-mock-lines em + em { width: 56%; } .mb-mock-pill { display: inline-block; margin-top: 10px; width: clamp(80px, 14vw, 140px); height: clamp(24px, 3.6vw, 38px); border-radius: 999px; background: var(--mb-accent); } .mb-mock-img { justify-self: end; width: min(100%, 230px); aspect-ratio: 1; border-radius: 26%; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 162, 94, .3); } .mb-mock-img img { width: 100%; height: 100%; object-fit: cover; } .mb-mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 2vw, 18px); margin-top: clamp(18px, 3vw, 36px); } .mb-mock-cards span { height: clamp(60px, 9vw, 110px); border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--mb-white-line); } .mb-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .55em; padding: .62rem 1rem .62rem .8rem; border-radius: 999px; background: rgba(24, 27, 36, .72); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .8125rem; font-weight: 550; color: #fff; white-space: nowrap; box-shadow: 0 14px 40px rgba(0, 0, 0, .4); animation: mb-float 7s ease-in-out infinite; } .mb-chip::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mb-accent); flex: none; box-shadow: 0 0 0 4px rgba(201, 162, 94, .22), 0 0 14px rgba(201, 162, 94, .7); } .mb-chip-1 { top: 22%; left: -3%; } .mb-chip-2 { top: 10%; right: -3%; animation-delay: -2.3s; } .mb-chip-3 { top: 62%; left: -2%; animation-delay: -4.6s; } @media (max-width: 760px) { .mb-chip-3 { display: none; } .mb-chip { font-size: .72rem; padding: .5rem .8rem .5rem .65rem; } .mb-chip-1 { left: 3%; top: -18px; } .mb-chip-2 { right: 2%; top: auto; bottom: 30%; } .mb-mock-hero { grid-template-columns: 1fr; } .mb-mock-img { display: none; } } /* 8 LEISTUNGEN (BENTO) --------------------------------------------- */ .mb-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.8vw, 20px); } .mb-card { position: relative; overflow: hidden; grid-column: span 4; padding: clamp(26px, 3.2vw, 40px); border-radius: var(--mb-radius); background: #fff; border: 1px solid rgba(0, 0, 0, .05); transition: translate .6s var(--mb-ease), rotate .5s var(--mb-ease), box-shadow .6s var(--mb-ease); } .mb-card:hover { translate: 0 -4px; box-shadow: 0 24px 60px rgba(13, 15, 20, .10); } .mb-b7 { grid-column: span 7; } .mb-b5 { grid-column: span 5; } .mb-b12 { grid-column: span 12; } .mb-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.6rem; border-radius: 15px; background: var(--mb-dark); color: var(--mb-accent); } .mb-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mb-card p { color: var(--mb-mute); margin: .7rem 0 0; font-size: 1rem; } .mb-card-dark { background: radial-gradient(90% 90% at 100% 0%, rgba(201, 162, 94, .30), transparent 60%), var(--mb-dark); color: #F5F5F7; border-color: rgba(201, 162, 94, .28); } .mb-card-dark p { color: #B8B8BD; } .mb-card-dark .mb-ico { background: rgba(201, 162, 94, .16); } .mb-card-wide { display: grid; grid-template-columns: auto 1fr; gap: 0 clamp(20px, 4vw, 48px); align-items: center; } .mb-card-wide .mb-ico { margin: 0; width: 64px; height: 64px; } .mb-card-wide p { max-width: 62ch; } @media (max-width: 960px) { .mb-card, .mb-b4 { grid-column: span 6; } .mb-b7, .mb-b5 { grid-column: span 6; } .mb-b12 { grid-column: span 12; } } @media (max-width: 680px) { .mb-card, .mb-b7, .mb-b5, .mb-b4 { grid-column: span 12; } .mb-card-wide { grid-template-columns: 1fr; } .mb-card-wide .mb-ico { margin-bottom: 1.4rem; } } /* 9 PRINZIPIEN ------------------------------------------------------ */ .mb-principles { border-top: 1px solid var(--mb-white-line); } .mb-pr { display: grid; grid-template-columns: 90px 1fr; gap: 8px 24px; align-items: start; padding: clamp(28px, 4.5vw, 52px) 0; border-bottom: 1px solid var(--mb-white-line); } .mb-pr-n { font-size: .875rem; font-weight: 600; letter-spacing: .1em; color: var(--mb-accent); padding-top: .9em; } .mb-page .mb-pr h3.mb-pr-h { font-size: clamp(2rem, 6vw, 4.4rem); line-height: 1; letter-spacing: -.04em; font-weight: 700; } .mb-pr p { grid-column: 2; margin: .9rem 0 0; max-width: 54ch; color: var(--mb-mute-dark); font-size: clamp(1rem, 1.5vw, 1.2rem); } @media (max-width: 600px) { .mb-pr { grid-template-columns: 1fr; } .mb-pr-n { padding-top: 0; } .mb-pr p { grid-column: 1; } } /* 10 VORGEHEN ------------------------------------------------------- */ .mb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 32px); counter-reset: mbs; position: relative; } .mb-step { position: relative; padding-top: 76px; } .mb-step::before { counter-increment: mbs; content: counter(mbs); position: absolute; top: 0; left: 0; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mb-dark); color: var(--mb-accent); font-weight: 700; font-size: 1.05rem; box-shadow: 0 0 0 8px #fff; } .mb-step::after { content: ""; position: absolute; top: 25px; left: 60px; right: -20px; height: 2px; background: linear-gradient(90deg, var(--mb-accent), transparent); opacity: .55; } .mb-step:last-child::after { display: none; } .mb-step p { margin: .6rem 0 0; color: var(--mb-mute); font-size: 1rem; } @media (max-width: 960px) { .mb-steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } .mb-step:nth-child(2)::after { display: none; } } @media (max-width: 560px) { .mb-steps { grid-template-columns: 1fr; } .mb-step::after { display: none; } } /* 11 REFERENZEN ----------------------------------------------------- */ .mb-refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 20px); } .mb-ref { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; padding: clamp(24px, 3vw, 34px); border-radius: var(--mb-radius-s); background: var(--mb-dark-2); border: 1px solid var(--mb-white-line); color: #F5F5F7; text-decoration: none; transition: translate .6s var(--mb-ease), rotate .5s var(--mb-ease), border-color .4s, background .4s; } .mb-ref:hover, .mb-ref:focus-visible { translate: 0 -4px; border-color: rgba(201, 162, 94, .6); background: var(--mb-dark-3); } .mb-ref:focus-visible { outline: 2px solid var(--mb-accent); outline-offset: 3px; } .mb-ref-d { font-size: .8125rem; letter-spacing: .04em; color: var(--mb-accent); margin-bottom: .6rem; } .mb-page .mb-ref h3.mb-h3 { font-size: 1.35rem; } .mb-ref p { margin: .55rem 0 0; color: var(--mb-mute-dark); font-size: .95rem; } .mb-ref-go { align-self: flex-end; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; margin-top: 1.4rem; transition: background .4s, color .4s, transform .5s var(--mb-ease); } .mb-ref-go::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--mb-arrow) center / contain no-repeat; mask: var(--mb-arrow) center / contain no-repeat; transform: rotate(-45deg); } .mb-ref:hover .mb-ref-go { background: var(--mb-accent); color: var(--mb-dark); transform: rotate(45deg); } @media (max-width: 960px) { .mb-refs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .mb-refs { grid-template-columns: 1fr; } .mb-ref { min-height: 0; } } /* 12 ÜBER MICH ------------------------------------------------------ */ .mb-about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .mb-about-card { position: relative; border-radius: 36px; padding: clamp(28px, 5vw, 56px); background: radial-gradient(80% 80% at 50% 0%, rgba(201, 162, 94, .26), transparent 70%), var(--mb-dark); display: grid; place-items: center; aspect-ratio: 1; box-shadow: 0 40px 90px rgba(13, 15, 20, .25); } .mb-about-card img { width: min(100%, 300px); border-radius: 26%; box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 162, 94, .3); } .mb-ticks { margin-top: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } .mb-ticks li { position: relative; padding-left: 34px; font-size: .98rem; line-height: 1.45; } .mb-ticks li::before { content: ""; position: absolute; left: 0; top: .05em; width: 22px; height: 22px; border-radius: 50%; background: var(--mb-dark); } .mb-ticks li::after { content: ""; position: absolute; left: 5px; top: calc(.05em + 5px); width: 12px; height: 12px; background: var(--mb-accent); -webkit-mask: var(--mb-check) center / contain no-repeat; mask: var(--mb-check) center / contain no-repeat; } .mb-about .mb-actions { margin-top: 2.2rem; } .mb-about .mb-lead { margin: 1.25rem 0 1.1rem; max-width: 52ch; } @media (max-width: 900px) { .mb-about { grid-template-columns: 1fr; } .mb-about-card { aspect-ratio: auto; max-width: 420px; } } @media (max-width: 560px) { .mb-ticks { grid-template-columns: 1fr; } } /* 13 FAQ ------------------------------------------------------------ */ .mb-faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--mb-line); } .mb-faq details { border-bottom: 1px solid var(--mb-line); } .mb-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; cursor: pointer; list-style: none; font-family: var(--mb-font); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; } .mb-faq summary::-webkit-details-marker { display: none; } .mb-faq summary::after { content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--mb-mist) var(--mb-plus) center / 16px no-repeat; transition: transform .45s var(--mb-ease), background-color .3s; } .mb-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--mb-accent); } .mb-faq summary:hover::after { background-color: #E8E8ED; } .mb-faq details[open] summary:hover::after { background-color: var(--mb-accent-hover); } .mb-faq summary:focus-visible { outline: 2px solid var(--mb-ink); outline-offset: 4px; border-radius: 8px; } .mb-faq-a { padding: 0 60px 28px 0; color: var(--mb-mute); max-width: 68ch; animation: mb-faq .5s var(--mb-ease); } .mb-faq-a p { margin: 0; } @keyframes mb-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 560px) { .mb-faq-a { padding-right: 0; } } /* 14 KONTAKT UND FORMULAR ------------------------------------------ */ .mb-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; } .mb-contact .mb-lead { margin-top: 1.25rem; } .mb-contact .mb-actions { margin-top: 2rem; } .mb-page p.mb-contact-mail { margin: 1.6rem 0 0; font-size: .95rem; color: var(--mb-mute-dark); } .mb-contact-mail a { color: #fff; text-underline-offset: 3px; overflow-wrap: anywhere; } .mb-contact-mail a:hover { color: var(--mb-accent); } .mb-form { padding: clamp(24px, 3.4vw, 40px); border-radius: var(--mb-radius); background: var(--mb-dark-2); border: 1px solid var(--mb-white-line); } .mb-form form { display: grid; gap: 16px; margin: 0; } .mb-form label { display: block; font-size: .875rem; font-weight: 550; color: #E5E5EA; margin-bottom: 6px; } .mb-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), .mb-form textarea, .mb-form select { width: 100%; padding: 15px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 1rem; line-height: 1.4; transition: border-color .25s, background .25s, box-shadow .25s; } .mb-form textarea { min-height: 150px; resize: vertical; } .mb-form input:focus, .mb-form textarea:focus, .mb-form select:focus { outline: none; border-color: var(--mb-accent); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(201, 162, 94, .22); } .mb-form ::placeholder { color: #8E8E93; } .mb-form button, .mb-form input[type="submit"] { justify-self: start; padding: 16px 30px; border: 0; border-radius: 999px; cursor: pointer; background: var(--mb-accent); color: var(--mb-dark); font: inherit; font-weight: 650; font-size: 1rem; transition: background .3s, transform .2s; } .mb-form button:hover, .mb-form input[type="submit"]:hover { background: var(--mb-accent-hover); } .mb-form button:active { transform: scale(.97); } .mb-form a { color: var(--mb-accent); } .mb-page p.mb-form-note { margin: 18px 0 0; font-size: .8125rem; color: var(--mb-mute-dark); } .mb-form-note a { color: #fff; text-underline-offset: 3px; } @media (max-width: 900px) { .mb-contact { grid-template-columns: 1fr; } } /* 15 FOOTER --------------------------------------------------------- */ .mb-footer { background: #07080B; color: var(--mb-mute-dark); font-family: var(--mb-font-body); font-size: .9rem; padding: clamp(48px, 7vw, 80px) 0 36px; border-top: 1px solid var(--mb-white-line); } .mb-footer .mb-wrap { padding-inline: var(--gutter); } .mb-footer ul { list-style: none; margin: 0; padding: 0; } .mb-footer a { color: #D1D1D6; text-decoration: none; transition: color .25s; } .mb-footer a:hover, .mb-footer a:focus-visible { color: var(--mb-accent); } .mb-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid var(--mb-white-line); } .mb-foot-brand { display: flex; align-items: center; gap: 16px; } .mb-foot-brand img { border-radius: 11px; box-shadow: 0 0 0 1px rgba(201, 162, 94, .3); } .mb-foot-brand strong { display: block; color: #fff; font-size: 1.05rem; letter-spacing: -.01em; } .mb-foot-brand p { margin: 2px 0 0; } .mb-foot-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; } .mb-foot-links a { overflow-wrap: anywhere; } .mb-foot-bot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; padding-top: 26px; font-size: .8125rem; } .mb-foot-bot ul { display: flex; flex-wrap: wrap; gap: 8px 22px; } .mb-footer .sc-cookie-link, .mb-footer li a { font: inherit; } /* 16 RECHTSTEXTE ---------------------------------------------------- */ .mb-legal .mb-lhero { padding-top: calc(var(--mb-head) + clamp(56px, 9vw, 110px)); padding-bottom: clamp(48px, 7vw, 90px); background: radial-gradient(60% 80% at 50% 0%, rgba(201, 162, 94, .22), transparent 70%), var(--mb-dark); border-radius: 0 0 clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px); } .mb-legal .mb-lhero .mb-kicker { margin-bottom: 1rem; } .mb-legal .mb-lbody { background: #fff; color: var(--mb-ink); padding-block: clamp(48px, 7vw, 96px); } .mb-legal .mb-lbody .mb-wrap > * { max-width: 820px; } .mb-legal .mb-lbody h1, .mb-legal .mb-lbody h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -.02em; margin: 2.2em 0 .6em; } .mb-legal .mb-lbody h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.25; margin: 1.8em 0 .5em; } .mb-legal .mb-lbody h4 { font-size: 1.05rem; margin: 1.5em 0 .4em; } .mb-legal .mb-lbody > .mb-wrap > :first-child, .mb-legal .mb-lbody .sc-legal > :first-child { margin-top: 0; } .mb-legal .mb-lbody p, .mb-legal .mb-lbody li, .mb-legal .mb-lbody address { color: var(--mb-ink); font-size: 1rem; line-height: 1.7; } .mb-legal .mb-lbody p, .mb-legal .mb-lbody address { margin: 0 0 1.1em; font-style: normal; } .mb-legal .mb-lbody ul, .mb-legal .mb-lbody ol { margin: 0 0 1.3em; padding-left: 1.4em; } .mb-legal .mb-lbody ul { list-style: disc; } .mb-legal .mb-lbody ol { list-style: decimal; } .mb-legal .mb-lbody li { margin-bottom: .45em; } .mb-legal .mb-lbody li::marker { color: var(--mb-accent-text); } .mb-legal .mb-lbody strong { font-weight: 650; } .mb-legal .mb-lbody a { color: var(--mb-accent-text); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; } .mb-legal .mb-lbody a:hover { color: var(--mb-ink); } .mb-legal .mb-lbody table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .95rem; display: block; overflow-x: auto; } .mb-legal .mb-lbody th, .mb-legal .mb-lbody td { padding: 10px 14px; border: 1px solid var(--mb-line); text-align: left; vertical-align: top; } .mb-legal .mb-lbody th { background: var(--mb-mist); font-weight: 650; } .mb-legal .mb-lbody img { max-width: 100%; height: auto; border-radius: 12px; } mark.mb-pruefen { background: #FFE866; color: #1D1D1F; padding: 0 .25em; border-radius: 4px; } /* 17 KORREKTUREN ---------------------------------------------------- */ .mb-page a.mb-btn { text-decoration: none; } .mb-page .mb-btn { color: var(--b-fg); } .mb-page .mb-btn:hover, .mb-page .mb-btn:focus-visible { color: var(--b-hf); } .mb-header .mb-btn { color: var(--b-fg); } .mb-header .mb-btn:hover, .mb-header .mb-btn:focus-visible { color: var(--b-hf); } /* 18 BEWEGUNG (v1.1) ------------------------------------------------ */ @property --mb-ang { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes mb-drop { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mb-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes mb-pop { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mb-rise { from { transform: translateY(46px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mb-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes mb-sweep { 0%, 55% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } } @keyframes mb-drift { from { transform: translate3d(-4%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.14); } } @keyframes mb-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes mb-spin { to { --mb-ang: 360deg; } } /* Kopf fährt ein, Scroll-Fortschritt */ .mb-js .mb-header { animation: mb-drop .9s var(--mb-ease) backwards; } .mb-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, transparent, var(--mb-accent) 60%, #F0D9A6); pointer-events: none; } /* Wort-für-Wort-Überschriften */ .mb-js:not(.mb-split) [data-split] { opacity: 0; } .mb-show [data-split] { opacity: 1; } .mb-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .02em .16em; margin: -.1em -.02em -.16em; } .mb-wi { display: inline-block; transform: translateY(115%) rotate(5deg); transform-origin: 0 100%; transition: transform 1.1s var(--mb-ease) calc(var(--i, 0) * .07s); } [data-split].is-in .mb-wi, .mb-show [data-split] .mb-wi { transform: none; } .mb-gold.is-sp { background: none; -webkit-text-fill-color: initial; color: var(--mb-accent); } .mb-gold.is-sp .mb-wi { background: linear-gradient(100deg, #F0D9A6 0%, #C9A25E 40%, #F5E3B5 60%, #A57F38 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: mb-shimmer 6s ease-in-out infinite alternate; } /* Hero: Lichtkugeln, Auftritt, Fenster */ .mb-orb { position: absolute; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: mb-drift 15s ease-in-out infinite alternate; } .mb-orb-1 { width: 46vw; height: 46vw; max-width: 640px; max-height: 640px; left: -14%; top: 8%; background: radial-gradient(circle, rgba(201, 162, 94, .38), transparent 68%); } .mb-orb-2 { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -12%; top: 28%; background: radial-gradient(circle, rgba(92, 112, 180, .34), transparent 68%); animation-duration: 19s; animation-delay: -6s; } .mb-js .mb-hero .mb-kicker { animation: mb-rise 1s var(--mb-ease) .15s backwards; } .mb-js .mb-mock-lines span:nth-child(1) { transform-origin: 0 50%; animation: mb-grow 1.1s var(--mb-ease) 1.1s backwards; } .mb-js .mb-mock-lines span:nth-child(2) { transform-origin: 0 50%; animation: mb-grow 1.1s var(--mb-ease) 1.35s backwards; } .mb-js .mb-mock-lines em { transform-origin: 0 50%; animation: mb-grow 1s var(--mb-ease) 1.6s backwards; } .mb-js .mb-mock-lines em + em { animation-delay: 1.75s; } .mb-js .mb-mock-pill { animation: mb-pop .8s var(--mb-ease) 1.95s backwards; } .mb-js .mb-mock-img { animation: mb-pop 1.1s var(--mb-ease) 1.2s backwards; } .mb-js .mb-mock-cards span { animation: mb-rise 1s var(--mb-ease) backwards; } .mb-js .mb-mock-cards span:nth-child(1) { animation-delay: 2.1s; } .mb-js .mb-mock-cards span:nth-child(2) { animation-delay: 2.25s; } .mb-js .mb-mock-cards span:nth-child(3) { animation-delay: 2.4s; } .mb-mock::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .13), transparent); animation: mb-sweep 7s ease-in-out 3s infinite; } .mb-chip-1 { animation-name: mb-float; } /* Laufschrift (im Hero, unter dem Fenster) */ .mb-marquee { position: relative; z-index: 1; overflow: hidden; padding: 12px 0 clamp(96px, 12vw, 150px); transform: skewY(calc(var(--vk, 0) * 1deg)); transform-origin: 50% 50%; } .mb-mq-row { display: flex; align-items: center; width: max-content; gap: 0; animation: mb-mq 46s linear infinite; font-family: var(--mb-font); font-weight: 800; font-size: clamp(2.8rem, 9vw, 7.5rem); letter-spacing: -.04em; line-height: 1.12; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, .26); } .mb-mq-row span, .mb-mq-row i { padding-inline: .28em; } .mb-mq-row i { font-style: normal; font-size: .5em; -webkit-text-stroke: 0; color: var(--mb-accent); } .mb-mq-row + .mb-mq-row { animation-direction: reverse; animation-duration: 58s; -webkit-text-stroke: 0; background: linear-gradient(90deg, rgba(201, 162, 94, .85), rgba(240, 217, 166, .85), rgba(201, 162, 94, .85)); -webkit-background-clip: text; background-clip: text; margin-top: -.08em; } .mb-mq-row + .mb-mq-row i { color: rgba(255, 255, 255, .5); } .mb-marquee:hover .mb-mq-row { animation-play-state: paused; } /* Überlappende Abschnitte (wie gestapelte Karten) */ .mb-page:not(.mb-legal) > .mb-sec:not(.mb-hero) { margin-top: -44px; border-radius: 44px 44px 0 0; padding-top: calc(var(--mb-sec) + 44px); box-shadow: 0 -24px 60px rgba(0, 0, 0, .18); } .mb-page:not(.mb-legal) > .mb-hero { position: relative; z-index: 0; } .mb-page:not(.mb-legal) > .mb-sec:not(.mb-hero) { z-index: 1; } /* Kacheln: Schimmer unter der Maus, 3D */ .mb-bento, .mb-refs { perspective: 1400px; } .mb-card::after, .mb-ref::after, .mb-form::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 162, 94, .2), transparent 62%); } .mb-card-dark::after, .mb-ref::after, .mb-form::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 162, 94, .26), transparent 62%); } .mb-card:hover::after, .mb-ref:hover::after, .mb-form:hover::after { opacity: 1; } .mb-form { position: relative; } .mb-ico { transition: transform .7s var(--mb-ease), background .4s, color .4s; } .mb-card:hover .mb-ico { transform: rotate(-8deg) scale(1.1); background: var(--mb-accent); color: var(--mb-dark); } /* Rotierender Goldring um die Logo-Kachel */ .mb-about-card::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--mb-ang), transparent 0 55%, rgba(201, 162, 94, .95) 78%, #F5E3B5 88%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mb-spin 6s linear infinite; pointer-events: none; } .mb-about-card img { transition: transform 1s var(--mb-ease); } .mb-about-card:hover img { transform: scale(1.06) rotate(-3deg); } /* Prinzipien als festgepinnte Bühne (nur mit Skript und ohne reduzierte Bewegung) */ .mb-pin-bar { display: none; } .mb-fx .mb-page > section.mb-pin { padding-block: 0; height: 340vh; height: 340svh; } .mb-fx .mb-pin-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; } .mb-fx .mb-pin-stick > .mb-wrap { position: relative; } .mb-fx .mb-pin .mb-head { margin-bottom: clamp(16px, 3.5vh, 44px); } .mb-fx .mb-pin .mb-principles { position: relative; height: clamp(230px, 40vh, 420px); border-top: 1px solid var(--mb-white-line); } .mb-fx .mb-pin .mb-pr { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr; align-content: center; gap: 0; padding: 0; border: 0; opacity: 0; transform: translateY(70px) scale(.95); filter: blur(16px); pointer-events: none; transition: opacity .8s var(--mb-ease), transform 1s var(--mb-ease), filter .8s var(--mb-ease); } .mb-fx .mb-pin .mb-pr.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; } .mb-fx .mb-pin .mb-pr.is-past { transform: translateY(-70px) scale(1.04); } .mb-fx .mb-pin .mb-pr-n { padding: 0 0 .6rem; } .mb-fx .mb-page .mb-pin .mb-pr h3.mb-pr-h { font-size: clamp(2.8rem, 11vw, 8rem); line-height: .95; background: linear-gradient(100deg, #fff 30%, #F0D9A6 70%, #C9A25E); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mb-fx .mb-pin .mb-pr p { grid-column: 1; } .mb-fx .mb-pin-bar { display: block; height: 2px; margin-top: clamp(16px, 3vh, 36px); background: rgba(255, 255, 255, .14); border-radius: 2px; overflow: hidden; } .mb-fx .mb-pin-bar i { display: block; height: 100%; background: linear-gradient(90deg, #F0D9A6, #C9A25E); transform-origin: 0 50%; transform: scaleX(var(--pp, 0)); } /* Vorgehen: Linie zeichnet sich, Kreise leuchten auf */ .mb-fx .mb-step::before { transform: scale(.72); opacity: .45; transition: transform .8s var(--mb-ease), opacity .6s, background .6s, color .6s; } .mb-fx .mb-step::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--mb-ease) .25s; } .mb-fx .mb-step.is-on::before { transform: none; opacity: 1; background: var(--mb-accent); color: var(--mb-dark); } .mb-fx .mb-step.is-on::after { transform: none; } /* Cursor-Ring */ .mb-cursor { position: fixed; left: 0; top: 0; z-index: 200; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1.5px solid rgba(201, 162, 94, .85); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .3s, width .4s var(--mb-ease), height .4s var(--mb-ease), margin .4s var(--mb-ease), background .3s; } .mb-cursor.is-on { opacity: 1; } .mb-cursor.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(201, 162, 94, .16); } .mb-cursor.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; } /* Footer: Wortzeichen */ .mb-footer { position: relative; overflow: hidden; } .mb-foot-mark { margin: 0 0 clamp(28px, 5vw, 64px); text-align: center; font-family: var(--mb-font); font-weight: 800; font-size: clamp(2.2rem, 9.2vw, 9rem); letter-spacing: -.055em; line-height: .92; text-transform: uppercase; white-space: nowrap; user-select: none; -webkit-text-stroke: 1.2px rgba(201, 162, 94, .45); color: transparent; background: linear-gradient(180deg, rgba(201, 162, 94, .5), transparent 88%); -webkit-background-clip: text; background-clip: text; } /* Handy: schwere Effekte leichter */ @media (max-width: 760px) { .mb-page:not(.mb-legal) > .mb-sec:not(.mb-hero) { margin-top: -32px; border-radius: 32px 32px 0 0; padding-top: calc(var(--mb-sec) + 32px); } .mb-orb { filter: blur(50px); } .mb-js [data-r="left"], .mb-js [data-r="right"] { transform: translateY(32px); } } /* Bewegung reduzieren: alles ruhig und sichtbar */ @media (prefers-reduced-motion: reduce) { .mb-js .mb-header, .mb-js .mb-hero .mb-kicker, .mb-js .mb-mock-lines *, .mb-js .mb-mock-img, .mb-js .mb-mock-cards span, .mb-js .mb-mock-pill, .mb-orb, .mb-mq-row, .mb-about-card::before, .mb-mock::after, .mb-gold.is-sp .mb-wi { animation: none !important; } .mb-wi { transform: none; transition: none; } .mb-marquee { transform: none; } .mb-cursor { display: none; } }