/* * Design reminder — Kölner Kontur: editorial utility, Prüf-Marine als Basis, * Chartreuse nur als Orientierungssignal, kein generisches WordPress-Menü. */ :root { --fpmm-ink: #112d4d; --fpmm-ink-2: #0d3553; --fpmm-paper: #f7f7f2; --fpmm-muted: #647281; --fpmm-accent: #72ade7; --fpmm-active: #112d4d; --fpmm-focus-dark: #72ade7; --fpmm-focus-light: #112d4d; --fpmm-line: rgba(8, 40, 66, 0.14); --fpmm-radius: 16px; --fpmm-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --fpmm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } .fpmm-root { display: none; } @media (max-width: 1024px) { .fpmm-root { display: block; } body.fpmm-is-open { overflow: hidden !important; touch-action: none; } body.fpmm-is-open > :not(.fpmm-root) { pointer-events: none; } /* .fpmm-root liegt in der Praxis fast nie direkt im (Astra-Header-Builder, Astra-Hook, Spectra-Shortcode-Block), sondern verschachtelt in einem Wrapper. pointer-events: none vererbt sich sonst auf .fpmm-root selbst und macht den geöffneten Drawer inkl. Schließen-Button und Links unklickbar. Deshalb hier die Vererbungskette gezielt für den gesamten Menübaum wieder aufbrechen. */ body.fpmm-is-open .fpmm-root { pointer-events: auto; } .fpmm-root--sticky { position: sticky; z-index: 99990; top: 0; } .admin-bar .fpmm-root--sticky { top: 32px; } /* Absicherung gegen Theme-/Widget-Reset-CSS (z. B. Astra-Header-Widget- Flächen), das Buttons/Flex-Kinder verkleinert, verschiebt oder anders ausrichtet als vorgesehen. */ .fpmm-root { display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; line-height: normal !important; } .fpmm-toggle { all: unset !important; box-sizing: border-box !important; position: relative !important; flex: 0 0 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; border: 0 !important; border-radius: 50% !important; display: inline-grid !important; place-items: center !important; background: var(--fpmm-ink) !important; color: var(--fpmm-paper) !important; cursor: pointer !important; line-height: 1 !important; text-decoration: none !important; transition: transform 160ms var(--fpmm-ease-out), background-color 160ms ease; } .fpmm-toggle:active, .fpmm-back:active, .fpmm-nav-item:active, .fpmm-cta:active { transform: scale(.97); } .fpmm-toggle:focus-visible, .fpmm-back:focus-visible, .fpmm-nav-item:focus-visible, .fpmm-cta:focus-visible, .fpmm-contact a:focus-visible, .fpmm-all-link:focus-visible { outline: 3px solid var(--fpmm-accent); outline-offset: 3px; } .fpmm-toggle-lines { position: relative; display: block; width: 20px; height: 16px; } .fpmm-toggle-lines i { position: absolute; left: 0; display: block; width: 20px; height: 1.5px; border-radius: 4px; background: currentColor; transition: transform 230ms var(--fpmm-ease-in-out), opacity 160ms ease; } .fpmm-toggle-lines i:nth-child(1) { top: 1px; } .fpmm-toggle-lines i:nth-child(2) { top: 7px; } .fpmm-toggle-lines i:nth-child(3) { top: 13px; } .fpmm-toggle--close .fpmm-toggle-lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .fpmm-toggle--close .fpmm-toggle-lines i:nth-child(2) { opacity: 0; } .fpmm-toggle--close .fpmm-toggle-lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .fpmm-overlay { position: fixed; z-index: 99991; inset: 0; background: rgba(4,22,37,.56); backdrop-filter: blur(2px); opacity: 0; transition: opacity 180ms ease; } .fpmm-overlay.is-visible { opacity: 1; } .fpmm-drawer { position: fixed; z-index: 99992; top: 0; right: 0; bottom: 0; width: min(92%, 480px); box-sizing: border-box; display: grid; grid-template-rows: 68px minmax(0,1fr) auto; overflow: hidden; color: var(--fpmm-ink); background: var(--fpmm-paper); box-shadow: -24px 0 60px rgba(2,20,35,.2); transform: translateX(102%); transition: transform 280ms var(--fpmm-ease-out); } .admin-bar .fpmm-drawer { top: 46px; } .fpmm-drawer.is-open { transform: translateX(0); } .fpmm-drawer-header { min-width: 0; padding: 12px 17px 12px 18px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--fpmm-line); background: rgba(247,247,242,.98); } .fpmm-panels { position: relative; min-height: 0; overflow: hidden; } .fpmm-panel { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 22px 28px; opacity: 0; transform: translateX(10%); pointer-events: none; transition: transform 240ms var(--fpmm-ease-out), opacity 180ms ease; } .fpmm-panel.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } .fpmm-panel.is-exiting { opacity: 0; transform: translateX(-16%); pointer-events: none; } .fpmm-eyebrow { margin: 0 0 12px; color: var(--fpmm-muted); font: 700 11px/1.2 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; } .fpmm-panel h2 { max-width: 280px; margin: 0 0 14px; color: var(--fpmm-ink); font-family: Georgia, serif; font-size: clamp(30px,8vw,40px); line-height: .98; letter-spacing: -.045em; } .fpmm-nav ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fpmm-line); } .fpmm-nav li { position: relative; border-bottom: 1px solid var(--fpmm-line); } .fpmm-nav li.is-current::before { content: ''; position: absolute; z-index: 1; top: 14px; bottom: 14px; left: -22px; width: 4px; background: var(--fpmm-accent); } .fpmm-nav-item { position: relative; width: 100%; min-height: 66px; box-sizing: border-box; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 0; color: var(--fpmm-ink); background: transparent; text-align: left; text-decoration: none; font-family: Arial, sans-serif; transition: color 160ms ease, transform 160ms var(--fpmm-ease-out); } .fpmm-nav-item:hover { color: #265578; } .fpmm-nav-item span { min-width: 0; display: grid; gap: 3px; } .fpmm-nav-item strong { font-size: 20px; line-height: 1.08; font-weight: 700; letter-spacing: -.025em; } .fpmm-nav-item small { color: var(--fpmm-muted); font-size: 13px; line-height: 1.3; font-weight: 500; } .fpmm-nav-item svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--fpmm-ink); } .fpmm-nav--child { margin-top: 18px; } .fpmm-nav--child .fpmm-nav-item { min-height: 56px; padding: 13px 0; } .fpmm-nav--child .fpmm-nav-item strong { font-size: 17px; line-height: 1.25; } .fpmm-back { min-height: 44px; margin: -9px 0 25px; padding: 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--fpmm-ink); font: 700 14px/1 Arial, sans-serif; cursor: pointer; transition: transform 160ms var(--fpmm-ease-out); } .fpmm-back svg { width: 20px; height: 20px; } .fpmm-all-link { min-height: 44px; margin-bottom: 8px; display: inline-flex; align-items: center; gap: 8px; color: var(--fpmm-ink); font: 700 14px/1.2 Arial, sans-serif; text-decoration: none; } .fpmm-all-link svg { width: 19px; height: 19px; } .fpmm-drawer-footer { position: relative; padding: 16px 18px 18px; display: grid; gap: 13px; border-top: 1px solid var(--fpmm-line); background: #fff; box-shadow: 0 -8px 22px rgba(8,40,66,.04); } .fpmm-contact { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--fpmm-ink); font-family: Arial, sans-serif; } .fpmm-contact strong { font-size: 13px; } .fpmm-contact div { display: flex; align-items: center; gap: 12px; } .fpmm-contact a { color: var(--fpmm-muted); font-size: 12px; text-decoration: none; } .fpmm-cta { min-height: 52px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 8px; color: var(--fpmm-ink); background: var(--fpmm-accent); box-shadow: 0 8px 16px rgba(200,245,72,.16); font: 700 16px/1 Arial, sans-serif; letter-spacing: -.01em; text-decoration: none; transition: transform 160ms var(--fpmm-ease-out), box-shadow 160ms ease; } .fpmm-cta svg { width: 19px; height: 19px; } .fpmm-cta:hover { box-shadow: 0 10px 20px rgba(200,245,72,.28); } .fpmm-root .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } } @media (max-width: 782px) { .admin-bar .fpmm-root--sticky { top: 46px; } .admin-bar .fpmm-drawer { top: 46px; } } @media (max-width: 600px) { .admin-bar .fpmm-root--sticky, .admin-bar .fpmm-drawer { top: 0; } } @media (max-width: 360px) { .fpmm-panel { padding-right: 18px; padding-left: 18px; } .fpmm-nav li.is-current::before { left: -18px; } .fpmm-contact { align-items: flex-start; flex-direction: column; gap: 4px; } } /* CI-Blau für aktive Zustände; Hover bleibt auf Zeigegeräte begrenzt. */ .fpmm-nav li.is-current::before { background: var(--fpmm-active); } .fpmm-toggle:focus-visible { outline-color: var(--fpmm-focus-dark); } .fpmm-back:focus-visible, .fpmm-nav-item:focus-visible, .fpmm-cta:focus-visible, .fpmm-contact a:focus-visible, .fpmm-all-link:focus-visible { outline-color: var(--fpmm-focus-light); } .fpmm-cta { color: var(--fpmm-ink); background: var(--fpmm-accent); box-shadow: 0 8px 16px rgba(114,173,231,.24); } .fpmm-cta:hover { box-shadow: 0 10px 20px rgba(114,173,231,.36); } @media (hover: hover) and (pointer: fine) { .fpmm-nav-item { transition: color 160ms var(--fpmm-ease-out), background-color 160ms var(--fpmm-ease-out), transform 160ms var(--fpmm-ease-out); } .fpmm-nav-item:hover { color: var(--fpmm-ink); background-color: rgba(114,173,231,.14); transform: translateX(4px); } } /* HOW2PKV-Bestellmodul: CI-Blau, klare Hierarchie und große Berührungsfläche. */ .fpmm-book { min-height: 124px; margin-top: 22px; padding: 10px; display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 12px; border: 1px solid rgba(17,45,77,.22); border-radius: 8px; color: var(--fpmm-ink); background: linear-gradient(135deg,#fff 0%,#f2f8fd 100%); box-shadow: 0 8px 18px rgba(17,45,77,.08); text-decoration: none; transition: border-color 200ms var(--fpmm-ease-out), box-shadow 200ms var(--fpmm-ease-out), transform 200ms var(--fpmm-ease-out), background-color 200ms ease; } .fpmm-book-cover { width: 70px; height: 102px; display: block; object-fit: cover; object-position: top; border-radius: 3px; box-shadow: 0 4px 10px rgba(17,45,77,.18); } .fpmm-book-copy { min-width: 0; display: grid; align-content: center; gap: 3px; } .fpmm-book-copy small { color: #5a7185; font: 700 10px/1.1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; } .fpmm-book-copy strong { font: 700 25px/.9 Arial, sans-serif; letter-spacing: -.04em; } .fpmm-book-copy em { color: #405a70; font: 500 12px/1.3 Arial, sans-serif; font-style: normal; } .fpmm-book-buy { min-height: 36px; margin-top: 8px; padding: 0 10px; display: inline-flex; align-items: center; gap: 7px; border-radius: 5px; color: #ffffff; background: var(--fpmm-ink); box-shadow: 0 5px 10px rgba(17,45,77,.18); font: 700 12px/1 Arial, sans-serif; transition: background-color 180ms ease, transform 180ms var(--fpmm-ease-out), box-shadow 180ms ease; } .fpmm-book-buy img { width: 45px; height: 18px; object-fit: contain; object-position: left center; } .fpmm-book-buy svg { width: 15px; height: 15px; } .fpmm-book-buy img { filter: brightness(0) invert(1); } .fpmm-book:focus-visible { outline: 3px solid var(--fpmm-focus-light); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .fpmm-book:hover { border-color: var(--fpmm-accent); box-shadow: 0 16px 30px rgba(17,45,77,.18); transform: translateY(-4px) scale(1.01); }.fpmm-book:hover .fpmm-book-cover { transform: rotate(-2deg) scale(1.04); }.fpmm-book:hover .fpmm-book-buy { background: #1d5f90; box-shadow: 0 7px 15px rgba(17,45,77,.28); transform: translateX(3px); } } .fpmm-book-cover { transition: transform 220ms var(--fpmm-ease-out); } .fpmm-book--standalone { width: min(100%, 420px); margin: 0; } /* Der Shortcode blendet sich beim Laden ruhig ein, ohne die Drawer-Interaktion zu verzögern. */ .fpmm-root--shortcode { animation: fpmm-shortcode-reveal 260ms var(--fpmm-ease-out) both; } .fpmm-root--custom-bg .fpmm-drawer, .fpmm-root--custom-bg .fpmm-drawer-header, .fpmm-root--custom-bg .fpmm-drawer-footer { color: var(--fpmm-shortcode-foreground); background: var(--fpmm-shortcode-background); border-color: var(--fpmm-shortcode-line); } .fpmm-root--custom-bg .fpmm-drawer { --fpmm-ink: var(--fpmm-shortcode-foreground); --fpmm-muted: var(--fpmm-shortcode-foreground); --fpmm-line: var(--fpmm-shortcode-line); } .fpmm-root--custom-bg .fpmm-toggle { color: var(--fpmm-shortcode-toggle-foreground) !important; background: var(--fpmm-shortcode-toggle-background) !important; } .fpmm-root--custom-bg .fpmm-cta { color: #112d4d; } .fpmm-root--custom-bg .fpmm-book { --fpmm-ink: #112d4d; --fpmm-muted: #647281; --fpmm-paper: #ffffff; --fpmm-line: rgba(17,45,77,.18); } .fpmm-root--custom-font .fpmm-nav-item strong { font-size: var(--fpmm-shortcode-font-size); } .fpmm-root--custom-font .fpmm-nav--child .fpmm-nav-item strong { font-size: var(--fpmm-shortcode-child-font-size); } @keyframes fpmm-shortcode-reveal { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 1025px) { .fpmm-root { display: none !important; } } @media (prefers-reduced-motion: reduce) { .fpmm-root *, .fpmm-root *::before, .fpmm-root *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }