/* TaktFlo Landing – in WP Coder → Tab „CSS“ einfügen */ /* Alles unter .tf-root, damit Theme-Styles möglichst nicht kollidieren */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@500;600;700&display=swap"); .tf-root { /* Gedämpftes Grau (dunkler) — Akzent Blau */ --tf-bg: #a8aeb8; --tf-bg-elev: #b8bec8; --tf-bg-card: #c4cad4; --tf-border: rgba(15, 23, 42, 0.16); --tf-text: #1d1d1f; --tf-muted: #6e6e73; --tf-accent: #2563eb; --tf-accent-2: #1d4ed8; --tf-accent-bright: #3b82f6; --tf-accent-soft: rgba(37, 99, 235, 0.1); --tf-glow: rgba(37, 99, 235, 0.22); --tf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08); --tf-shadow-md: 0 12px 36px rgba(15, 23, 42, 0.1); --tf-shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.14); --tf-radius-sm: 10px; --tf-radius: 16px; --tf-radius-lg: 22px; --tf-max: 1120px; --tf-font: "DM Sans", system-ui, sans-serif; --tf-display: "Outfit", var(--tf-font); /* Motion-Tokens (zentral, damit alle Übergänge gleich „atmen“) */ --tf-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --tf-ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --tf-ease-soft: cubic-bezier(0.4, 0, 0.2, 1); --tf-dur-1: 180ms; --tf-dur-2: 320ms; --tf-dur-3: 520ms; --tf-dur-4: 760ms; color: var(--tf-text); font-family: var(--tf-font); font-size: 17px; line-height: 1.65; background: var(--tf-bg); background-image: radial-gradient(ellipse 100% 70% at 50% -25%, rgba(59, 130, 246, 0.1), transparent 52%), radial-gradient(ellipse 70% 50% at 100% 30%, rgba(15, 23, 42, 0.12), transparent 45%), linear-gradient(180deg, #9ca3af 0%, var(--tf-bg) 42%, #9aa0ac 100%); position: relative; isolation: isolate; overflow-x: hidden; } .tf-root *, .tf-root *::before, .tf-root *::after { box-sizing: border-box; } .tf-root a { color: inherit; text-decoration: none; } .tf-root a.tf-btn--primary { color: #fff; } .tf-container { width: min(100% - 2.5rem, var(--tf-max)); margin-inline: auto; } .tf-gradient-text { background: linear-gradient(120deg, #93c5fd 0%, var(--tf-accent) 45%, #60a5fa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Header */ .tf-header { position: sticky; top: 0; z-index: 100; background: rgba(228, 231, 238, 0.78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--tf-border); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.06); transition: background var(--tf-dur-2) var(--tf-ease-soft), box-shadow var(--tf-dur-2) var(--tf-ease-soft), border-color var(--tf-dur-2) var(--tf-ease-soft); } /* Landing: fixierte Leiste, beim Runterscrollen ausblenden, beim Hochscrollen wieder ein */ #taktflo-landing { --tf-header-offset: 5.25rem; --tf-header-gap: 0; scroll-padding-top: var(--tf-header-offset); } @media (min-width: 900px) { #taktflo-landing { --tf-header-offset: 6.75rem; } } #taktflo-landing .tf-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 200; transform: translate3d(0, 0, 0); border-bottom: none !important; box-shadow: none !important; background: rgba(232, 235, 242, 0.82) !important; transition: transform var(--tf-dur-2) var(--tf-ease-out), background var(--tf-dur-2) var(--tf-ease-soft); } #taktflo-landing > main { padding-top: var(--tf-header-offset) !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } body.tf-header-is-hidden #taktflo-landing .tf-header { transform: translate3d(0, calc(-100% - 1px), 0); pointer-events: none; } @media (prefers-reduced-motion: reduce) { body.tf-header-is-hidden #taktflo-landing .tf-header { transform: none; pointer-events: auto; } } /* sobald die Seite gescrollt wurde (Klasse via main.js am ) – ruhiger Tiefen-Effekt */ body.tf-scrolled .tf-header, .tf-scrolled .tf-header { background: rgba(220, 224, 232, 0.92); border-bottom-color: rgba(15, 23, 42, 0.1); box-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(15, 23, 42, 0.06); } .tf-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0.65rem 0; } .tf-logo { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--tf-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; } /* Maskottchen / Logo – gut sichtbar oben links */ .tf-logo__img { height: 56px; width: auto; max-width: min(220px, 52vw); object-fit: contain; object-position: left center; display: block; flex-shrink: 0; filter: drop-shadow(0 2px 10px rgba(15, 23, 42, 0.12)); } @media (min-width: 640px) { .tf-logo__img { height: 72px; max-width: min(260px, 42vw); } } @media (min-width: 900px) { .tf-logo__img { height: 84px; max-width: 280px; } .tf-header__inner { padding: 0.5rem 0 0.65rem; } } .tf-logo--footer .tf-logo__img { height: 52px; max-width: 175px; } @media (min-width: 640px) { .tf-logo--footer .tf-logo__img { height: 56px; max-width: 185px; } } .tf-nav--desktop { display: none; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); font-size: 0.93rem; color: var(--tf-muted); flex-wrap: nowrap; } .tf-nav--desktop a { white-space: nowrap; } .tf-nav--desktop a { position: relative; transition: color var(--tf-dur-2) var(--tf-ease-out); } .tf-nav--desktop a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.2rem; height: 2px; border-radius: 2px; background: var(--tf-accent); transform: scaleX(0); transform-origin: center; transition: transform var(--tf-dur-2) var(--tf-ease-spring); } .tf-nav--desktop a:hover { color: var(--tf-text); } .tf-nav--desktop a:hover::after { transform: scaleX(1); } .tf-header__actions { display: flex; align-items: center; gap: 0.65rem; } .tf-header-user-slot { display: flex; align-items: center; } /* Eingeloggt: Standard-Anmelde-Buttons ausblenden */ #taktflo-landing.tf-landing--logged-in .tf-header-auth-btn { display: none !important; } #taktflo-landing.tf-landing--logged-in .tf-mobile-nav__auth-section { display: none !important; } /* Benutzer-Menü (Header) */ .tf-user-menu { position: relative; } .tf-user-menu__trigger { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px; padding: 0 0.45rem 0 0.2rem; border: 1px solid var(--tf-border); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--tf-text); cursor: pointer; font-family: inherit; transition: border-color var(--tf-dur-2) var(--tf-ease-out), box-shadow var(--tf-dur-2) var(--tf-ease-out); } @media (hover: hover) and (pointer: fine) { .tf-user-menu__trigger:hover { border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12); } } .tf-user-menu__trigger:focus-visible { outline: 2px solid rgba(37, 99, 235, 0.45); outline-offset: 2px; } .tf-user-menu__avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: linear-gradient(135deg, var(--tf-accent), #3b82f6); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; } .tf-user-menu__chevron { display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.15rem; border-right: 2px solid var(--tf-muted); border-bottom: 2px solid var(--tf-muted); transform: rotate(45deg) translateY(-1px); transition: transform var(--tf-dur-1) var(--tf-ease-out); } .tf-user-menu--open .tf-user-menu__chevron { transform: rotate(225deg) translateY(1px); } .tf-user-menu__dropdown { position: absolute; right: 0; top: calc(100% + 0.45rem); min-width: 13.5rem; padding: 0.45rem; border: 1px solid var(--tf-border); border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14); z-index: 300; } .tf-user-menu__identity { margin: 0 0 0.35rem; padding: 0.65rem 0.7rem; border-radius: 9px; background: rgba(15, 23, 42, 0.045); border: 1px solid rgba(15, 23, 42, 0.07); cursor: default; user-select: text; pointer-events: none; } .tf-user-menu__identityLabel { display: block; margin-bottom: 0.3rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tf-muted); line-height: 1.2; } .tf-user-menu__name { display: block; font-size: 0.88rem; font-weight: 600; color: var(--tf-text); line-height: 1.3; } .tf-user-menu__email { display: block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 400; color: var(--tf-muted); word-break: break-all; } .tf-user-menu__item { display: block; width: 100%; box-sizing: border-box; padding: 0.5rem 0.55rem; border: none; border-radius: 8px; background: transparent; text-align: left; text-decoration: none; font-size: 0.9rem; font-weight: 500; font-family: inherit; color: var(--tf-text); cursor: pointer; transition: background var(--tf-dur-1) var(--tf-ease-out); } @media (hover: hover) and (pointer: fine) { .tf-user-menu__item:hover { background: rgba(15, 23, 42, 0.06); } } .tf-user-menu__sep { margin: 0.25rem 0; border: none; border-top: 1px solid var(--tf-border); } .tf-user-menu__signout { color: #b45309; } /* Mobile-Nav: eingeloggter Block */ .tf-user-menu-mobile { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.35rem 0 0.5rem; } .tf-user-menu-mobile__identity { margin: 0 0 0.45rem; padding: 0.65rem 0.7rem; border-radius: 9px; background: rgba(15, 23, 42, 0.045); border: 1px solid rgba(15, 23, 42, 0.07); cursor: default; user-select: text; pointer-events: none; } .tf-user-menu-mobile__identityLabel { display: block; margin-bottom: 0.3rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tf-muted); line-height: 1.2; } .tf-user-menu-mobile__name { display: block; font-size: 0.88rem; font-weight: 600; color: var(--tf-text); line-height: 1.3; } .tf-user-menu-mobile__email { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--tf-muted); word-break: break-all; } .tf-user-menu-mobile__label { margin: 0 0 0.25rem; padding: 0 0.15rem; font-size: 0.78rem; font-weight: 600; color: var(--tf-muted); text-transform: uppercase; letter-spacing: 0.05em; } .tf-user-menu-mobile__link { display: block; padding: 0.65rem 0.15rem; border: none; background: transparent; text-align: left; text-decoration: none; font-size: 1rem; font-weight: 500; font-family: inherit; color: var(--tf-text); cursor: pointer; } .tf-user-menu-mobile__signout { color: #b45309; } .tf-burger { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--tf-border); border-radius: 10px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; transition: background var(--tf-dur-2) var(--tf-ease-out), border-color var(--tf-dur-2) var(--tf-ease-out), transform var(--tf-dur-1) var(--tf-ease-out); } @media (hover: hover) and (pointer: fine) { .tf-burger:hover { background: rgba(59, 130, 246, 0.08); border-color: rgba(37, 99, 235, 0.35); } } .tf-burger:active { transform: scale(0.97); } .tf-burger span { display: block; height: 2px; width: 16px; margin-inline: auto; background: var(--tf-text); border-radius: 1px; transition: transform var(--tf-dur-2) var(--tf-ease-spring), opacity var(--tf-dur-1) var(--tf-ease-out); } .tf-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .tf-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .tf-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .tf-mobile-nav { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.25rem 1.25rem; border-bottom: 1px solid var(--tf-border); background: rgba(255, 255, 255, 0.98); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); box-shadow: var(--tf-shadow-md); /* sanftes Erscheinen */ transform-origin: top center; animation: tfMobileNavIn var(--tf-dur-3) var(--tf-ease-spring) both; } @keyframes tfMobileNavIn { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .tf-mobile-nav a:not(.tf-mobile-nav__cta) { padding: 0.65rem 0; color: var(--tf-muted); border-bottom: 1px solid var(--tf-border); } .tf-mobile-nav a:not(.tf-mobile-nav__cta):hover { color: var(--tf-text); } .tf-mobile-nav__section { margin: 0.35rem 0 0; padding: 0.35rem 0 0; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(92, 101, 120, 0.85); border-top: 1px solid var(--tf-border); } .tf-mobile-nav__section:first-of-type { margin-top: 0.65rem; } .tf-mobile-nav__cta { margin-top: 0.5rem; text-align: center; border: none !important; color: #fff !important; -webkit-text-fill-color: #fff; background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-bright, #3b82f6)) !important; box-shadow: 0 4px 18px var(--tf-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .tf-mobile-nav__cta:hover, .tf-mobile-nav__cta:focus-visible { color: #fff !important; -webkit-text-fill-color: #fff; } /* Geschlossen: einige Browser / CSS-Kombinationen ignorieren [hidden] sonst */ .tf-mobile-nav[hidden], #tf-mobile-nav[hidden] { display: none !important; } /* Schmale Viewports: gleiche Schwelle wie Desktop-Nav (900px) */ @media (max-width: 899.98px) { #taktflo-landing .tf-burger { position: relative; z-index: 2; pointer-events: auto; -webkit-tap-highlight-color: transparent; } /* nur Logo + Burger — Login/Konto im aufgeklappten Menü */ #taktflo-landing .tf-header__actions > .tf-btn { display: none !important; } /* Panel als Overlay, damit die Startseite nicht erst „weggescrollt“ werden muss */ #taktflo-landing #tf-mobile-nav:not([hidden]) { display: flex !important; position: absolute; left: 0; right: 0; top: 100%; z-index: 120; max-height: min(85vh, 560px); max-height: min(85dvh, 560px); overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 1rem 1rem max(1.25rem, env(safe-area-inset-bottom, 0px)); border-radius: 0 0 14px 14px; box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14); } } @media (min-width: 900px) { .tf-nav--desktop { display: flex; } .tf-burger { display: none; } .tf-mobile-nav { display: none !important; } } /* Buttons */ .tf-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.15rem; border-radius: 999px; font-weight: 600; font-size: 0.93rem; letter-spacing: -0.005em; border: 1px solid transparent; cursor: pointer; user-select: none; text-decoration: none; transition: transform var(--tf-dur-1) var(--tf-ease-out), box-shadow var(--tf-dur-2) var(--tf-ease-out), background var(--tf-dur-2) var(--tf-ease-out), border-color var(--tf-dur-2) var(--tf-ease-out), color var(--tf-dur-2) var(--tf-ease-out); } .tf-btn:active { transform: translateY(0) scale(0.985); } @media (hover: hover) and (pointer: fine) { .tf-btn:hover { transform: translateY(-1px); } } .tf-btn--primary, a.tf-btn--primary, button.tf-btn--primary, .tf-btn--primary:link, .tf-btn--primary:visited, a.tf-btn--primary:link, a.tf-btn--primary:visited { background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-bright, #3b82f6)); color: #fff !important; -webkit-text-fill-color: #fff; box-shadow: 0 4px 18px var(--tf-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .tf-btn--primary:hover, .tf-btn--primary:focus, .tf-btn--primary:focus-visible, .tf-btn--primary:active, a.tf-btn--primary:hover, a.tf-btn--primary:focus, a.tf-btn--primary:focus-visible, a.tf-btn--primary:active { color: #fff !important; -webkit-text-fill-color: #fff; } @media (hover: hover) and (pointer: fine) { .tf-btn--primary:hover, a.tf-btn--primary:hover { box-shadow: 0 10px 30px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.18); } } .tf-btn--ghost { border-color: var(--tf-border); color: var(--tf-text); background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (hover: hover) and (pointer: fine) { .tf-btn--ghost:hover { border-color: rgba(37, 99, 235, 0.4); color: var(--tf-accent); background: rgba(37, 99, 235, 0.06); } } .tf-btn--lg { padding: 0.78rem 1.4rem; font-size: 1rem; } .tf-btn:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.85); outline-offset: 3px; } /* Hero */ .tf-hero { padding: 3.5rem 0 4rem; position: relative; } .tf-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 85% 55% at 75% 15%, rgba(59, 130, 246, 0.1), transparent 52%), radial-gradient(ellipse 60% 45% at 10% 85%, rgba(71, 85, 105, 0.2), transparent 48%); pointer-events: none; z-index: -1; } .tf-hero__grid { display: grid; gap: 3rem; align-items: center; } @media (min-width: 960px) { .tf-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; } } .tf-eyebrow { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--tf-accent-2); margin: 0 0 1rem; font-weight: 600; } .tf-hero__title { font-family: var(--tf-display); font-size: clamp(2rem, 4.5vw, 3.15rem); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 1.25rem; } .tf-hero__lead { color: var(--tf-muted); margin: 0 0 1.5rem; max-width: 36rem; } .tf-checklist { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.65rem; } .tf-checklist li { position: relative; padding-left: 1.6rem; color: var(--tf-muted); font-size: 0.98rem; } .tf-checklist li::before { content: ""; position: absolute; left: 0; top: 0.45rem; width: 0.55rem; height: 0.55rem; border-radius: 4px; background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-2)); box-shadow: 0 2px 8px var(--tf-glow); } .tf-hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .tf-hero__metaLinks { margin: 0.75rem 0 0; font-size: 0.95rem; opacity: 0.92; } .tf-hero__platforms { font-size: 0.85rem; color: var(--tf-muted); margin: 0; } .tf-hero__platforms span { color: var(--tf-muted); } /* Orbit visual */ .tf-hero__visual { display: flex; justify-content: center; } .tf-orbit { position: relative; width: min(100%, 380px); aspect-ratio: 1; } .tf-orbit__hub { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; border-radius: 22px; background: linear-gradient(160deg, #ffffff, var(--tf-bg-elev)); border: 1px solid var(--tf-border); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: var(--tf-display); font-weight: 600; box-shadow: var(--tf-shadow-md), 0 0 50px var(--tf-glow); z-index: 2; animation: tfHubFloat 7s ease-in-out infinite; } @keyframes tfHubFloat { 0%, 100% { transform: translate(-50%, calc(-50% - 4px)); } 50% { transform: translate(-50%, calc(-50% + 4px)); } } .tf-orbit__hub small { font-weight: 500; color: var(--tf-muted); font-size: 0.75rem; } .tf-orbit__ring { position: absolute; inset: 8%; border-radius: 50%; border: 1px dashed rgba(37, 99, 235, 0.28); animation: tf-spin 48s linear infinite; } @keyframes tf-spin { to { transform: rotate(360deg); } } .tf-orbit__nodes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; } .tf-orbit__nodes li { position: absolute; font-size: 0.72rem; padding: 0.35rem 0.6rem; border-radius: 999px; background: var(--tf-bg-card); border: 1px solid var(--tf-border); color: var(--tf-muted); white-space: nowrap; box-shadow: var(--tf-shadow-sm); transition: transform var(--tf-dur-3) var(--tf-ease-out), color var(--tf-dur-2) var(--tf-ease-out), border-color var(--tf-dur-2) var(--tf-ease-out); } @media (hover: hover) and (pointer: fine) { .tf-orbit:hover .tf-orbit__nodes li { color: var(--tf-text); border-color: rgba(59, 130, 246, 0.28); transform: scale(1.04); } } .tf-orbit__nodes li:nth-child(1) { top: 6%; left: 42%; } .tf-orbit__nodes li:nth-child(2) { top: 22%; right: 4%; } .tf-orbit__nodes li:nth-child(3) { top: 48%; right: 0; } .tf-orbit__nodes li:nth-child(4) { bottom: 18%; right: 12%; } .tf-orbit__nodes li:nth-child(5) { bottom: 8%; left: 28%; } .tf-orbit__nodes li:nth-child(6) { top: 28%; left: 0; } /* Sections */ .tf-section { padding: 4rem 0; border-top: 1px solid var(--tf-border); } .tf-closing-band .tf-section { border-top: none; } .tf-section--tight { padding-top: 3rem; } .tf-section__title { font-family: var(--tf-display); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; text-align: center; } .tf-section__subtitle { color: var(--tf-muted); text-align: center; max-width: 36rem; margin: 0 auto 2.5rem; } /* Steps */ .tf-steps { display: grid; gap: 1.25rem; } @media (min-width: 768px) { .tf-steps { grid-template-columns: repeat(3, 1fr); } } .tf-step { background: var(--tf-bg-card); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.5rem 1.35rem; box-shadow: var(--tf-shadow-sm); } .tf-step__num { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-bright, #3b82f6)); color: #ffffff; font-weight: 700; font-size: 0.9rem; margin-bottom: 1rem; } .tf-step h3 { font-family: var(--tf-display); font-size: 1.1rem; margin: 0 0 0.5rem; } .tf-step p { margin: 0; color: var(--tf-muted); font-size: 0.95rem; } /* Features */ .tf-features { display: grid; gap: 1rem; } @media (min-width: 640px) { .tf-features { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .tf-features { grid-template-columns: repeat(4, 1fr); } } .tf-card { background: var(--tf-bg-card); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.35rem; box-shadow: var(--tf-shadow-sm); transition: border-color var(--tf-dur-2) var(--tf-ease-out), box-shadow var(--tf-dur-3) var(--tf-ease-out), transform var(--tf-dur-3) var(--tf-ease-spring); } @media (hover: hover) and (pointer: fine) { .tf-card:hover { border-color: rgba(59, 130, 246, 0.35); box-shadow: var(--tf-shadow-lg); transform: translate3d(0, -6px, 0) scale(1.02); } } .tf-card h3 { font-family: var(--tf-display); font-size: 1rem; margin: 0 0 0.5rem; } .tf-card p { margin: 0; color: var(--tf-muted); font-size: 0.9rem; } .tf-card__icon { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem; border: 1px solid rgba(59, 130, 246, 0.22); background: linear-gradient(160deg, rgba(59, 130, 246, 0.12), rgba(255, 255, 255, 0.9)); } /* Simple SVG icons via mask */ .tf-ico { position: relative; } .tf-ico::after { content: ""; position: absolute; inset: 10px; background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-2)); opacity: 0.95; } .tf-ico--archive::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a2 2 0 012-2h12a2 2 0 012 2v3H4V5zm0 5h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10zm4 2v2h8v-2H8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 5a2 2 0 012-2h12a2 2 0 012 2v3H4V5zm0 5h16v10a2 2 0 01-2 2H6a2 2 0 01-2-2V10zm4 2v2h8v-2H8z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--list::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--tuner::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18zm0 2a7 7 0 110 14 7 7 0 010-14zm3.5 7H12V7.5h-2V14h5.5v-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 100 18 9 9 0 000-18zm0 2a7 7 0 110 14 7 7 0 010-14zm3.5 7H12V7.5h-2V14h5.5v-2z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--pen::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4l10.5-10.5-4-4L4 16v4zm2-2h1.5L16 9.5l-2-2L6 16v2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 20h4l10.5-10.5-4-4L4 16v4zm2-2h1.5L16 9.5l-2-2L6 16v2z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--print::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8V2H8v2zm0 14v4h8v-4H8zm10-12H6a2 2 0 00-2 2v6h4v4h8v-4h4V8a2 2 0 00-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8V2H8v2zm0 14v4h8v-4H8zm10-12H6a2 2 0 00-2 2v6h4v4h8v-4h4V8a2 2 0 00-2-2z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--offline::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3a4.237 4.237 0 00-6 0zm-4-4l2 2a7.074 7.074 0 0110 0l2-2C15.14 9.14 8.87 9.14 5 13z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--devices::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1z'/%3E%3C/svg%3E") center / contain no-repeat; } .tf-ico--shield::after { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V5l-8-3zm0 18c-3.5-1.12-6-5.05-6-9V6.3l6-2.25 6 2.25V11c0 3.95-2.5 7.88-6 9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V5l-8-3zm0 18c-3.5-1.12-6-5.05-6-9V6.3l6-2.25 6 2.25V11c0 3.95-2.5 7.88-6 9z'/%3E%3C/svg%3E") center / contain no-repeat; } /* Infografik-Einblicke (transparente PNGs auf dunklem Grund) */ .tf-section--showcase { background: linear-gradient(180deg, rgba(30, 33, 40, 0.5) 0%, var(--tf-bg) 100%); } .tf-showcase { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); margin-top: 0.75rem; max-width: 58rem; margin-inline: auto; } .tf-showcase__item { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.15rem; } @media (min-width: 900px) { .tf-showcase__item { flex-direction: row; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); } .tf-showcase__item--reverse { flex-direction: row-reverse; } } .tf-showcase__item--wide { max-width: 58rem; margin-inline: auto; width: 100%; } .tf-showcase__figure { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; background: var(--tf-bg-card); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); overflow: hidden; box-shadow: var(--tf-shadow-sm); transition: border-color 0.25s ease, box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } @media (min-width: 900px) { .tf-showcase__figure { flex: 1 1 52%; max-width: 52%; min-width: 0; } } .tf-showcase__figure:hover { border-color: rgba(59, 130, 246, 0.28); box-shadow: var(--tf-shadow-md), 0 0 40px rgba(59, 130, 246, 0.06); transform: translateY(-10px); } .tf-showcase__img { display: block; width: 100%; height: auto; vertical-align: middle; background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(37, 99, 235, 0.06), var(--tf-bg-elev)); padding: 1rem 1rem 0; box-sizing: border-box; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); } .tf-showcase__figure:hover .tf-showcase__img { transform: scale(1.025); } .tf-showcase__copy { flex: 1 1 auto; padding: 0.25rem 0.15rem; } @media (min-width: 900px) { .tf-showcase__copy { flex: 1 1 48%; max-width: 48%; min-width: 0; padding: 0.5rem 0.25rem; } } .tf-showcase__heading { font-family: var(--tf-display); font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; color: var(--tf-text); margin: 0 0 0.5rem; letter-spacing: -0.02em; } .tf-showcase__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--tf-muted); } /* Plattformen: Geräte-Cluster (Handy vorne links, Tablet Mitte, Laptop hinten – wie klassische Responsive-Mockups) */ .tf-section--devices { background: var(--tf-bg); } .tf-section--devices .tf-section__subtitle { margin-bottom: 2.25rem; } .tf-devices-overlap-wrap { margin-top: 0.25rem; } .tf-devices-overlap { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: flex-end; min-height: clamp(240px, 52vw, 400px); padding: 2.5rem 0.75rem 3rem; max-width: 58rem; margin-inline: auto; gap: 0; } .tf-devices-overlap__item { position: relative; flex: 0 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid var(--tf-border); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12), 0 2px 0 rgba(255, 255, 255, 0.9) inset; background: var(--tf-bg-card); transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease; } .tf-devices-overlap__item img { display: block; width: 100%; height: auto; vertical-align: middle; } /* Desktop: absolut positioniert für klare Überlagerung (Referenz: Marketing-Mockup) */ @media (min-width: 769px) { .tf-devices-overlap { display: block; /* Mindesthöhe ≥ höchstes Mockup (Laptop), sonst überlappt der Stack Titel/Untertitel */ min-height: clamp(320px, 48vw, 480px); padding: 1.25rem 0 4rem; } .tf-devices-overlap__item { position: absolute; bottom: 0; width: auto; max-width: none; } /* Laptop: hinten rechts, größte Fläche */ .tf-devices-overlap__item--laptop { right: 0; width: min(58%, 520px); z-index: 1; transform: rotate(-2deg); transform-origin: 75% 100%; } /* Tablet: Mitte, überlappt Laptop */ .tf-devices-overlap__item--tablet { left: 50%; width: min(48%, 420px); z-index: 2; transform: translateX(-50%) translateY(-14px); transform-origin: 50% 100%; } /* Smartphone: vorne links, oberste Ebene */ .tf-devices-overlap__item--phone { left: 0; width: min(22%, 200px); z-index: 3; transform: translateY(-28px) rotate(-5deg); transform-origin: 50% 100%; } .tf-devices-overlap:hover .tf-devices-overlap__item--laptop { transform: rotate(-1.5deg) translateY(-6px); } .tf-devices-overlap:hover .tf-devices-overlap__item--tablet { transform: translateX(-50%) translateY(-22px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(59, 130, 246, 0.08), 0 0 48px rgba(59, 130, 246, 0.1); } .tf-devices-overlap:hover .tf-devices-overlap__item--phone { transform: translateY(-36px) rotate(-4deg); } } /* Schmale Tablets: Flex mit starker Überlappung */ @media (min-width: 769px) and (max-width: 1024px) { .tf-devices-overlap__item--laptop { right: 0; width: min(56%, 460px); } .tf-devices-overlap__item--tablet { width: min(46%, 380px); transform: translateX(-50%) translateY(-10px); } .tf-devices-overlap__item--phone { width: min(24%, 180px); transform: translateY(-20px) rotate(-4deg); } } .tf-devices-overlap__item:focus-within { z-index: 6; outline: 2px solid rgba(59, 130, 246, 0.45); outline-offset: 4px; } .tf-devices-overlap__hint { position: relative; z-index: 4; text-align: center; font-size: 0.95rem; line-height: 1.6; color: var(--tf-muted); max-width: 40rem; margin: 2rem auto 0; padding: 0 0.5rem 0.5rem; } .tf-devices-overlap__strong { color: var(--tf-accent-2); font-weight: 600; } @media (max-width: 768px) { .tf-devices-overlap { flex-direction: column; align-items: center; min-height: 0; padding: 1.5rem 0 2rem; } .tf-devices-overlap__item { position: relative; } .tf-devices-overlap__item--laptop, .tf-devices-overlap__item--tablet, .tf-devices-overlap__item--phone { width: min(88vw, 400px); margin-left: 0 !important; transform: none !important; } .tf-devices-overlap__item--phone { z-index: 3; order: 1; } .tf-devices-overlap__item--tablet { z-index: 2; order: 2; margin-top: -3rem !important; } .tf-devices-overlap__item--laptop { z-index: 1; order: 3; margin-top: -3rem !important; } .tf-devices-overlap:hover .tf-devices-overlap__item--laptop, .tf-devices-overlap:hover .tf-devices-overlap__item--tablet, .tf-devices-overlap:hover .tf-devices-overlap__item--phone { transform: translateY(-4px) !important; } } /* Scroll-Reveal: ohne JS alles sichtbar; mit JS erst verstecken bis .is-visible */ .tf-reveal, .tf-reveal-stagger > .tf-step, .tf-reveal-stagger > .tf-card, .tf-reveal-stagger > .tf-device, .tf-reveal-stagger > .tf-price-card, .tf-reveal-stagger > .tf-pill, .tf-reveal-stagger > .tf-audience-card { opacity: 1; transform: translate3d(0, 0, 0); } html.tf-reveal-js .tf-reveal:not(.is-visible):not(.tf-reveal--future) { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity var(--tf-dur-4) var(--tf-ease-out), transform var(--tf-dur-4) var(--tf-ease-out); } /* Compositing nur während die Animation läuft anstoßen */ html.tf-reveal-js .tf-reveal:not(.is-visible) { will-change: opacity, transform; } html.tf-reveal-js .tf-reveal.tf-reveal--left:not(.is-visible) { transform: translate3d(-30px, 0, 0); } html.tf-reveal-js .tf-reveal.tf-reveal--right:not(.is-visible) { transform: translate3d(30px, 0, 0); } html.tf-reveal-js .tf-reveal.tf-reveal--slide-wide.tf-reveal--left:not(.is-visible) { transform: translate3d(-72px, 14px, 0); transition: opacity 1.05s cubic-bezier(0.19, 1, 0.22, 1), transform 1.15s cubic-bezier(0.19, 1, 0.22, 1); } html.tf-reveal-js .tf-reveal.tf-reveal--slide-wide.tf-reveal--right:not(.is-visible) { transform: translate3d(72px, 14px, 0); transition: opacity 1.05s cubic-bezier(0.19, 1, 0.22, 1), transform 1.15s cubic-bezier(0.19, 1, 0.22, 1); } html.tf-reveal-js .tf-reveal.tf-reveal--slide-wide.is-visible { transition: opacity 1.05s cubic-bezier(0.19, 1, 0.22, 1), transform 1.15s cubic-bezier(0.19, 1, 0.22, 1); } .tf-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } .tf-showcase .tf-reveal { transition: opacity 0.95s var(--tf-ease-spring), transform 0.95s var(--tf-ease-spring); } .tf-reveal.tf-reveal--delay-1 { transition-delay: 0.12s; } .tf-reveal.tf-reveal--delay-2 { transition-delay: 0.22s; } .tf-showcase .tf-reveal.tf-reveal--delay-1 { transition-delay: 0.18s; } html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-step, html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-card, html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-device, html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-price-card, html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-pill, html.tf-reveal-js .tf-reveal-stagger:not(.is-visible) > .tf-audience-card { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .tf-reveal-stagger.is-visible > .tf-step, .tf-reveal-stagger.is-visible > .tf-card, .tf-reveal-stagger.is-visible > .tf-device, .tf-reveal-stagger.is-visible > .tf-price-card, .tf-reveal-stagger.is-visible > .tf-pill, .tf-reveal-stagger.is-visible > .tf-audience-card { opacity: 1; transform: translate3d(0, 0, 0); } .tf-reveal-stagger.is-visible > .tf-step:nth-child(1) { transition-delay: 0.04s; } .tf-reveal-stagger.is-visible > .tf-step:nth-child(2) { transition-delay: 0.12s; } .tf-reveal-stagger.is-visible > .tf-step:nth-child(3) { transition-delay: 0.2s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(1) { transition-delay: 0.03s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(2) { transition-delay: 0.07s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(3) { transition-delay: 0.11s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(4) { transition-delay: 0.15s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(5) { transition-delay: 0.19s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(6) { transition-delay: 0.23s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(7) { transition-delay: 0.27s; } .tf-reveal-stagger.is-visible > .tf-card:nth-child(8) { transition-delay: 0.31s; } .tf-reveal-stagger.is-visible > .tf-device:nth-child(1) { transition-delay: 0.06s; } .tf-reveal-stagger.is-visible > .tf-device:nth-child(2) { transition-delay: 0.14s; } .tf-reveal-stagger.is-visible > .tf-device:nth-child(3) { transition-delay: 0.22s; } .tf-reveal-stagger.is-visible > .tf-price-card:nth-child(1) { transition-delay: 0.06s; } .tf-reveal-stagger.is-visible > .tf-price-card:nth-child(2) { transition-delay: 0.14s; } .tf-reveal-stagger.is-visible > .tf-price-card:nth-child(3) { transition-delay: 0.22s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(1) { transition-delay: 0.03s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(2) { transition-delay: 0.06s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(3) { transition-delay: 0.09s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(4) { transition-delay: 0.12s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(5) { transition-delay: 0.15s; } .tf-reveal-stagger.is-visible > .tf-pill:nth-child(6) { transition-delay: 0.18s; } @media (prefers-reduced-motion: reduce) { .tf-reveal, .tf-reveal-stagger > .tf-step, .tf-reveal-stagger > .tf-card, .tf-reveal-stagger > .tf-device, .tf-reveal-stagger > .tf-price-card, .tf-reveal-stagger > .tf-pill { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; will-change: auto !important; } .tf-orbit__hub, .tf-orbit__ring, .tf-mobile-nav { animation: none !important; } .tf-orbit__hub { transform: translate(-50%, -50%) !important; } .tf-showcase__figure:hover, .tf-showcase__figure:hover .tf-showcase__img { transform: none !important; } .tf-devices-overlap__item, .tf-devices-overlap:hover .tf-devices-overlap__item--laptop, .tf-devices-overlap:hover .tf-devices-overlap__item--tablet, .tf-devices-overlap:hover .tf-devices-overlap__item--phone { transform: none !important; transition: none !important; } .tf-devices-overlap { display: flex !important; flex-direction: column !important; align-items: center !important; min-height: 0 !important; gap: 0; flex-wrap: nowrap; padding-top: 1.25rem; padding-bottom: 1.25rem; } .tf-devices-overlap__item { position: relative !important; left: auto !important; right: auto !important; width: min(88vw, 400px) !important; max-width: 100% !important; } .tf-devices-overlap__item--tablet, .tf-devices-overlap__item--phone, .tf-devices-overlap__item--laptop { margin-left: 0 !important; margin-top: 0 !important; } } /* Quote */ .tf-section--quote { background: linear-gradient(180deg, #c8ccd6 0%, var(--tf-bg-elev) 100%); border-top-color: transparent; } .tf-quote { text-align: center; max-width: 40rem; margin-inline: auto; } .tf-quote__text { font-family: var(--tf-display); font-size: clamp(1.15rem, 2.5vw, 1.45rem); font-weight: 500; line-height: 1.45; margin: 0 0 1rem; font-style: italic; color: var(--tf-text); } .tf-quote__meta { color: var(--tf-muted); margin: 0; font-size: 0.95rem; } .tf-stars { color: var(--tf-accent); letter-spacing: 0.1em; } /* Audience */ .tf-audience { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; } .tf-pill { padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--tf-border); background: var(--tf-bg-card); font-size: 0.9rem; color: var(--tf-muted); box-shadow: var(--tf-shadow-sm); } /* Pricing */ .tf-section--pricing { background: var(--tf-bg); } .tf-pricing { display: grid; gap: 1rem; } @media (min-width: 768px) { .tf-pricing { grid-template-columns: repeat(3, 1fr); align-items: stretch; } } .tf-price-card { position: relative; background: var(--tf-bg-card); border: 1px solid var(--tf-border); border-radius: var(--tf-radius); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--tf-shadow-sm); transition: transform var(--tf-dur-2) var(--tf-ease-out), box-shadow var(--tf-dur-2) var(--tf-ease-out), border-color var(--tf-dur-2) var(--tf-ease-out); } @media (hover: hover) and (pointer: fine) { .tf-price-card:hover { transform: translateY(-3px); border-color: rgba(59, 130, 246, 0.32); box-shadow: var(--tf-shadow-md); } } .tf-price-card h3 { font-family: var(--tf-display); margin: 0; font-size: 1.2rem; } .tf-price-card__desc { color: var(--tf-muted); margin: 0; font-size: 0.95rem; } .tf-price-card__note { margin: 0; font-size: 0.88rem; color: var(--tf-muted); flex-grow: 1; } .tf-price-card--featured { border-color: rgba(37, 99, 235, 0.35); box-shadow: var(--tf-shadow-md), 0 0 0 1px rgba(37, 99, 235, 0.08); } .tf-price-card__badge { position: absolute; top: -10px; right: 1rem; background: linear-gradient(135deg, var(--tf-accent), var(--tf-accent-bright, #3b82f6)); color: #ffffff; font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; } /* Startseite: kompakte Tarif-Vorschau (Link zu /pricing, kein Checkout-Grid) */ .tf-pricing-home { margin-top: 1.15rem; } .tf-pricing--embed { display: grid; gap: 0.65rem; grid-template-columns: 1fr; } @media (min-width: 520px) { .tf-pricing--embed { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .tf-pricing--embed { grid-template-columns: repeat(3, 1fr); } } .tf-pricing--embed .tf-price-card--link { padding: 1rem 1rem 0.85rem; gap: 0.25rem; text-decoration: none; color: inherit; cursor: pointer; } .tf-pricing--embed .tf-price-card--link h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; } .tf-pricing--embed .tf-price-card__desc { font-size: 13px; line-height: 1.35; } .tf-price-card__amount { margin: 0.15rem 0 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--tf-text); font-variant-numeric: tabular-nums; } .tf-price-card__period { font-size: 12px; font-weight: 500; color: var(--tf-muted); } .tf-price-card__cta { margin-top: 0.35rem; font-size: 13px; font-weight: 600; color: var(--tf-accent-2); } .tf-pricing-home__foot { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1.25rem; } .tf-pricing-home__hint { font-size: 13px; line-height: 1.4; color: var(--tf-muted); max-width: 28rem; } /* CTA band */ .tf-section--cta { text-align: center; position: relative; overflow: hidden; } .tf-section--cta::before { content: ""; position: absolute; inset: 20% -20% auto; height: 200px; background: radial-gradient(ellipse at center, var(--tf-glow), transparent 70%); pointer-events: none; z-index: 0; } .tf-cta { position: relative; z-index: 1; } .tf-cta__title { font-family: var(--tf-display); font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 0.75rem; } .tf-cta__text { color: var(--tf-muted); max-width: 32rem; margin: 0 auto 1.5rem; } .tf-cta__btns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* Contact */ .tf-section--contact .tf-section__title { text-align: left; } .tf-section--contact .tf-section__subtitle { text-align: left; margin-left: 0; margin-bottom: 1.5rem; } .tf-contact__grid { display: grid; gap: 1.5rem; } @media (min-width: 640px) { .tf-contact__grid { grid-template-columns: 1fr 1fr; } } .tf-contact__lead { color: var(--tf-text); font-size: 0.95rem; line-height: 1.55; margin: 0 0 1.1rem; max-width: 36ch; } .tf-contact__hint { color: var(--tf-muted); font-size: 0.88rem; margin: 0; } /* Footer */ .tf-footer { border-top: 1px solid var(--tf-border); padding: 1.75rem 0 1.15rem; background: #bcc1cb; box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.08); } .tf-footer__grid { display: grid; gap: 1.15rem; } @media (min-width: 768px) { .tf-footer__grid { grid-template-columns: 1.2fr 1fr 0.9fr; align-items: start; } } .tf-logo--footer { margin-bottom: 0.45rem; } .tf-footer__about { color: var(--tf-muted); font-size: 0.9rem; margin: 0; max-width: 22rem; } .tf-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .tf-footer__cols strong { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; } .tf-footer__cols a { display: block; color: var(--tf-muted); font-size: 0.9rem; padding: 0.2rem 0; } .tf-footer__cols a:hover { color: var(--tf-accent-2); } .tf-footer__cta p { margin: 0 0 0.75rem; } .tf-footer__copy { text-align: center; color: #8b95a5; font-size: 0.82rem; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--tf-border); } /* Smooth scroll nur innerhalb Landing */ .tf-root { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { .tf-root { scroll-behavior: auto; } } /* ===================================================================== Mobil & schmale Viewports (< 640px): Lesbarkeit, Touch, Abstände ===================================================================== */ @media (max-width: 639.98px) { /* Notch / Home Indicator */ #taktflo-landing { padding-inline: max(0px, env(safe-area-inset-left, 0px)) max(0px, env(safe-area-inset-right, 0px)); } #taktflo-landing .tf-container { width: min(100% - 1rem, var(--tf-max)); } /* Header: weniger Gedränge */ #taktflo-landing .tf-header__inner { gap: 0.5rem 0.65rem; padding: 0.5rem 0; align-items: center; flex-wrap: nowrap; } #taktflo-landing .tf-logo { font-size: 1rem; gap: 0.45rem; min-width: 0; } #taktflo-landing .tf-logo__img { height: 44px; max-width: min(148px, 42vw); } /* Text neben Bild optional ausblenden (Logo-Bild enthält bereits TaktFlo) */ #taktflo-landing .tf-logo__text { display: none; } #taktflo-landing .tf-header__actions { gap: 0.35rem; flex-shrink: 0; } #taktflo-landing .tf-burger { width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 10px; } /* Mobile-Menü größere Touch-Ziele */ #taktflo-landing .tf-mobile-nav { gap: 0.25rem; padding: 0.75rem 1rem 1.25rem; } #taktflo-landing .tf-mobile-nav > a:not(.tf-mobile-nav__cta) { display: flex; align-items: center; min-height: 48px; padding: 0.5rem 0.85rem; margin: 0; border: 1px solid transparent; border-radius: var(--tf-radius); border-bottom: none; } #taktflo-landing .tf-mobile-nav > a:not(.tf-mobile-nav__cta):active { background: rgba(37, 99, 235, 0.08); } #taktflo-landing .tf-mobile-nav__cta { min-height: 48px; display: inline-flex !important; align-items: center; justify-content: center; margin-top: 0.85rem !important; } /* Hero */ #taktflo-landing .tf-hero { padding-top: 1.85rem; padding-bottom: 2.5rem; } #taktflo-landing .tf-eyebrow { font-size: 0.72rem; margin-bottom: 0.75rem; } #taktflo-landing .tf-hero__title { font-size: clamp(1.52rem, 7.2vw, 2.05rem); line-height: 1.08; margin-bottom: 1rem; } #taktflo-landing .tf-hero__lead { font-size: 0.98rem; line-height: 1.62; margin-bottom: 1.15rem; } #taktflo-landing .tf-checklist { gap: 0.55rem; margin-bottom: 1.35rem; } #taktflo-landing .tf-checklist li { font-size: 0.9rem; line-height: 1.52; padding-left: 1.45rem; } #taktflo-landing .tf-hero__cta { flex-direction: column; width: 100%; gap: 0.6rem; margin-bottom: 1rem; } #taktflo-landing .tf-hero__cta .tf-btn { width: 100%; min-height: 48px; justify-content: center; } #taktflo-landing .tf-hero__metaLinks { font-size: 0.9025rem; line-height: 1.45; margin-top: 0.6rem !important; opacity: 0.9; text-wrap: balance; } #taktflo-landing .tf-hero__metaLinks a { text-decoration: underline; text-decoration-color: rgba(59, 130, 246, 0.45); text-underline-offset: 0.15em; } #taktflo-landing .tf-hero__platforms { margin-top: 0.85rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; justify-content: flex-start; font-size: 0.815rem; } #taktflo-landing .tf-hero__platforms span { display: inline; } #taktflo-landing .tf-hero__visual { margin-top: 1rem; width: 100%; } #taktflo-landing .tf-orbit { width: min(100%, 296px); margin-inline: auto; } #taktflo-landing .tf-orbit__hub { width: 100px; height: 100px; font-size: 0.88rem; } #taktflo-landing .tf-orbit__nodes li { font-size: 0.665rem; padding: 0.28rem 0.52rem; } /* Sektionen */ #taktflo-landing .tf-section { padding: 2.35rem 0; } #taktflo-landing .tf-section--tight { padding-top: 1.85rem; } #taktflo-landing .tf-section__title { font-size: clamp(1.35rem, 5.8vw, 1.95rem); padding: 0 0.125rem; } #taktflo-landing .tf-section__subtitle { margin-bottom: 1.85rem; font-size: 0.9625rem; line-height: 1.62; padding: 0 0.125rem; } #taktflo-landing .tf-step { padding: 1.22rem 1.05rem; } #taktflo-landing .tf-card { padding: 1.12rem 1rem; } /* Einblicke: weniger horizontales Parallax-Gefrickel auf schmal */ #taktflo-landing .tf-reveal.tf-reveal--slide-wide.tf-reveal--left { transform: translate3d(-18px, 16px, 0); } #taktflo-landing .tf-reveal.tf-reveal--slide-wide.tf-reveal--right { transform: translate3d(18px, 16px, 0); } #taktflo-landing .tf-showcase__img { padding: 0.35rem; } /* Geräte-Stack: Überlappung weniger aggressiv für Lesbarkeit */ #taktflo-landing .tf-devices-overlap__item--tablet { margin-top: -2.25rem !important; } #taktflo-landing .tf-devices-overlap__item--laptop { margin-top: -2.25rem !important; } #taktflo-landing .tf-price-card { padding: 1.45rem 1.15rem; } #taktflo-landing .tf-cta__btns { flex-direction: column; align-items: stretch; gap: 0.6rem; } #taktflo-landing .tf-cta__btns .tf-btn { width: 100%; max-width: 22rem; margin-inline: auto; min-height: 48px; justify-content: center; } #taktflo-landing .tf-footer { padding-block: 1.35rem 1rem; padding-inline: max(1rem, env(safe-area-inset-left, 0px)) max(1rem, env(safe-area-inset-right, 0px)); } /* Footer-Layout mobil: taktflo-closing.css (Navigation + Rechtliches nebeneinander) */ #taktflo-landing .tf-footer__copy { margin-top: 0.9rem; padding-top: 0.65rem; padding-inline: 0.25rem; } } /* ============================================================ WordPress / Block-Theme (z. B. Twenty Twenty-Five) Theme-Kopfzeile, Seitentitel und Theme-Footer ausblenden, NUR wenn #taktflo-landing auf der Seite existiert. (Benötigt :has() – aktuelle Browser; sonst siehe Hinweis unten.) ============================================================ */ @supports selector(:has(*)) { /* Gleiche Fläche wie .tf-root – keine weißen Ränder am Viewport */ html:has(#taktflo-landing), body:has(#taktflo-landing) { background-color: var(--tf-bg, #dce2ec) !important; max-width: none !important; } body:has(#taktflo-landing) .wp-site-blocks > header, body:has(#taktflo-landing) header.wp-block-template-part { display: none !important; } body:has(#taktflo-landing) .wp-site-blocks > footer, body:has(#taktflo-landing) footer.wp-block-template-part { display: none !important; } /* Doppelter Seitentitel („TaktFlo“) über dem WP-Coder-Block */ body:has(#taktflo-landing) .wp-block-post-title, body:has(#taktflo-landing) h1.wp-block-post-title, body:has(#taktflo-landing) .entry-title, body:has(#taktflo-landing) .wp-block-query-title { display: none !important; } /* Theme-Wrapper: volle Breite, kein weißer „Rahmen“ */ body:has(#taktflo-landing) .wp-site-blocks { padding: 0 !important; margin: 0 !important; max-width: none !important; width: 100% !important; background-color: var(--tf-bg, #f4f5f8) !important; } /* Nur Theme-
(direktes Kind von body), nicht #taktflo-landing > main */ body:has(#taktflo-landing) > main, body:has(#taktflo-landing) .wp-block-group:has(.entry-content), body:has(#taktflo-landing) .entry-content, body:has(#taktflo-landing) .wp-block-post-content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background-color: transparent !important; } /* Twenty Twenty-Five: „constrained“ Layout begrenzt oft die Breite */ body:has(#taktflo-landing) main .is-layout-constrained, body:has(#taktflo-landing) .entry-content .is-layout-constrained, body:has(#taktflo-landing) .wp-block-post-content.is-layout-constrained { max-width: none !important; } /* Aus dem Theme-Content-Container ausbrechen (Full-Bleed) */ body:has(#taktflo-landing) #taktflo-landing.tf-root { min-height: 100vh; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; } /* Kein horizontaler Scrollbalken durch 100vw */ body:has(#taktflo-landing) { overflow-x: hidden; } } /* ─── Standalone Legal (Alias → gleiches Design wie hp-legal in hanper.css) ─── */ html.tf-legal { --hp-bg: #f8fafc; --hp-text: #0f172a; --hp-muted: #475569; --hp-link: #2563eb; --hp-font: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --hp-display: "Outfit", var(--hp-font); color-scheme: light; } html.tf-legal, body.tf-legal { margin: 0; min-height: 100%; } body.tf-legal { box-sizing: border-box; font-family: var(--hp-font); font-size: 1.0625rem; line-height: 1.7; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--hp-bg); color: var(--hp-text); } body.tf-legal * { box-sizing: inherit; } .tf-legal-inner { width: min(100% - 2.5rem, 820px); margin: 0 auto; padding: 3rem 0 4rem; } .tf-legal-inner h1 { font-family: var(--hp-display); font-size: clamp(1.75rem, 4.5vw, 2.25rem); font-weight: 700; line-height: 1.2; margin: 0 0 1.25rem; color: var(--hp-text); letter-spacing: -0.03em; } .tf-legal-inner h2 { font-family: var(--hp-display); font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin: 2.25rem 0 0.85rem; color: var(--hp-text); letter-spacing: -0.02em; } .tf-legal-inner h3, .tf-legal-inner h4 { font-family: var(--hp-font); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 1.75rem 0 0.65rem; color: var(--hp-text); letter-spacing: -0.015em; } .tf-legal-inner p, .tf-legal-inner li { margin: 0 0 1rem; color: var(--hp-muted); line-height: 1.75; } .tf-legal-inner ul, .tf-legal-inner ol { margin: 0 0 1rem; padding-left: 1.35rem; } .tf-legal-inner li { margin-bottom: 0.45rem; } .tf-legal-inner strong { color: var(--hp-text); font-weight: 600; } .tf-legal-inner a { color: var(--hp-link); text-decoration: none; font-weight: 500; } .tf-legal-inner a:hover { text-decoration: underline; } .tf-legal-inner .tf-legal-note { padding: 1rem 1.25rem; border-radius: 12px; background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(15, 23, 42, 0.08); color: var(--hp-text); margin-bottom: 2rem; font-size: 0.95rem; line-height: 1.65; } .tf-legal-back { display: inline-block; margin-bottom: 2rem; font-size: 0.9375rem; font-weight: 600; color: var(--hp-link); text-decoration: none; } .tf-legal-back:hover { text-decoration: underline; } .tf-legal-back::before { content: "\2190 "; } @media (prefers-reduced-motion: reduce) { html.tf-legal *, html.tf-legal *::before, html.tf-legal *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ===================================================================== Apple-ähnliche Motion (dezent, prefers-reduced-motion respektiert) ===================================================================== */ @keyframes tfAppleHeroIn { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } #taktflo-landing.tf-hero-ready .tf-hero__copy.tf-reveal { animation: tfAppleHeroIn 1.05s var(--tf-ease-out) both; } #taktflo-landing.tf-hero-ready .tf-hero__visual.tf-reveal { animation: tfAppleHeroIn 1.15s var(--tf-ease-out) 0.12s both; } #taktflo-landing .tf-hero__visual { transition: transform 0.45s var(--tf-ease-out); will-change: transform; } @media (hover: hover) and (pointer: fine) { .tf-btn--primary { transition: transform var(--tf-dur-1) var(--tf-ease-out), box-shadow var(--tf-dur-2) var(--tf-ease-out), background var(--tf-dur-2) var(--tf-ease-out); } .tf-btn--primary:hover { transform: translate3d(0, -2px, 0) scale(1.02); } .tf-btn--primary:active { transform: translate3d(0, 0, 0) scale(0.98); } .tf-price-card--link:hover { transform: translate3d(0, -5px, 0) scale(1.015); } .tf-showcase__figure { transition: border-color 0.35s var(--tf-ease-out), box-shadow 0.55s var(--tf-ease-spring), transform 0.55s var(--tf-ease-spring); } .tf-showcase__figure:hover { transform: translate3d(0, -8px, 0) scale(1.01); } } html.tf-reveal-js .tf-reveal:not(.is-visible) { transform: translate3d(0, 28px, 0) scale(0.985); } html.tf-reveal-js .tf-reveal.is-visible { transform: translate3d(0, 0, 0) scale(1); transition: opacity var(--tf-dur-4) var(--tf-ease-out), transform var(--tf-dur-4) var(--tf-ease-spring); } .tf-section__title { letter-spacing: -0.03em; transition: letter-spacing var(--tf-dur-3) var(--tf-ease-out); } .tf-reveal-stagger.is-visible > .tf-pill { transition: opacity 0.55s var(--tf-ease-out), transform 0.55s var(--tf-ease-spring), box-shadow 0.55s var(--tf-ease-out); } .tf-reveal-stagger.is-visible > .tf-pill:hover { transform: translate3d(0, -2px, 0); box-shadow: var(--tf-shadow-md); } @media (prefers-reduced-motion: reduce) { #taktflo-landing.tf-hero-ready .tf-hero__copy.tf-reveal, #taktflo-landing.tf-hero-ready .tf-hero__visual.tf-reveal { animation: none; } #taktflo-landing .tf-hero__visual { transform: none !important; } }