/* ==========================================================================
Content pages: the blog, its articles, glossary, contact, press, about us,
accessibility (site/src/pages, built by site/build/build.py and content.py).
Loaded only on those pages, after site.css, whose tokens, type, buttons,
bar and footer it uses. The catalogue: site/src/pages/AUTHORING.md.
========================================================================== */
:root {
--prose: #283044;
--measure: 680px;
--ring: 0 0 0 4px rgba(99, 102, 241, .16);
/* the quiet grey of dates, captions, sources and labels: on these pages it carries real text, so
it is darker than site.css's (#94A3B8, 2.6:1) and meets WCAG AA (5:1 on white, 4.6:1 on mist) */
--faint: #667085;
/* form fields: a border that shows where the field is (3:1 against white, WCAG 1.4.11) */
--field: #8A93A8;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 18px; height: 18px; flex: none; }
.cp { display: block; }
.cp :target:not(.cat-anchor) { scroll-margin-top: 8px; }
.cp .gl-term:target, .cp .gl-sec:target { scroll-margin-top: 0; }
/* The fixed bar (68 px) never covers what the page scrolls to: a jump to a heading or a term, a field
that gets the focus (Shift+Tab walks up the page, WCAG 2.4.11), a form's answer. The glossary adds
its sticky letter bar. Scroll margins add to this padding, so the ones in this file stay small.
(The events page keeps its own margins in events.css.) */
html:has(main.cp:not(.t-events)) { scroll-padding-top: 88px; }
html:has(main.cp:not(.t-events) .gl-bar) { scroll-padding-top: 140px; }
/* ------------------------------------------------------------ page head (all but articles) */
.cp-head, .art-head { position: relative; isolation: isolate; text-align: center; }
.cp-head { padding: 148px 0 64px; }
.cp-head::before, .art-head::before {
content: ""; position: absolute; inset: 0 0 -60px; z-index: -2; pointer-events: none;
background:
radial-gradient(36% 58% at 84% 0%, rgba(139, 92, 246, .17), transparent 70%),
radial-gradient(30% 50% at 10% 8%, rgba(99, 102, 241, .12), transparent 70%),
radial-gradient(24% 42% at 98% 64%, rgba(219, 39, 119, .07), transparent 70%);
}
.cp-head::after, .art-head::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: radial-gradient(rgba(79, 70, 229, .11) 1.2px, transparent 1.2px); background-size: 26px 26px;
-webkit-mask-image: radial-gradient(56% 72% at 50% 0%, #000 18%, transparent 74%); mask-image: radial-gradient(56% 72% at 50% 0%, #000 18%, transparent 74%);
}
.cp-h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.03; letter-spacing: -.035em; color: var(--ink); max-width: 940px; margin: 14px auto 0; text-wrap: balance; }
/* the gradient phrase of a headline moves to the next line as a whole */
.cp-h1 .grad, .cb h2 .grad { display: inline-block; }
/* background-clip text only paints inside the box; the tight line height cut the g of Verbindung */
.cp-h1 .grad, .cb h2 .grad, .cp-sec-head h2 .grad { padding-bottom: .14em; margin-bottom: -.14em; }
.cp-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--dim); max-width: 660px; margin: 20px auto 0; text-wrap: pretty; }
.cp-stand { margin-top: 18px; font-size: 14px; color: var(--faint); }
/* ------------------------------------------------------------ article head */
.art-head { padding: 136px 0 44px; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 10px; font: 600 13px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #B9BEDA; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--violet-600); }
.crumbs a:hover { color: var(--ink); }
.crumbs li:first-child a { color: var(--dim); }
.art-h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.04; letter-spacing: -.035em; color: var(--ink); max-width: 900px; margin: 12px auto 0; text-wrap: balance; }
.art-lede { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--dim); max-width: 680px; margin: 22px auto 0; text-wrap: pretty; }
.art-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 30px; font-size: 14.5px; color: var(--dim); }
.art-by { display: grid; gap: 2px; text-align: left; line-height: 1.25; padding-right: 16px; border-right: 1px solid var(--line); }
.art-by b { font-weight: 600; font-size: 15px; color: var(--ink); }
.art-by span { font-size: 13.5px; }
.art-facts { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 4px; min-height: 36px; font-variant-numeric: tabular-nums; }
.art-facts > span:not(.bc-dot) { white-space: nowrap; }
.bc-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .55; flex: none; }
/* avatars: initials on the aurora, the team as the Fitiva mark */
.av-a, .av-s { display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: var(--aurora); font: 600 13px/1 Inter, sans-serif; letter-spacing: .02em; }
.av-a { width: 40px; height: 40px; }
.av-s { width: 26px; height: 26px; font-size: 10px; }
.av-l { width: 56px; height: 56px; font-size: 17px; }
.av-team { background: none; overflow: hidden; }
.av-team img { width: 100%; height: 100%; border-radius: 30%; }
/* ------------------------------------------------------------ covers: a photo or a drawn motif */
.cvr { position: relative; overflow: hidden; background: var(--mist); }
.cvr-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cvr-art {
display: grid; place-items: center; isolation: isolate;
--t1: #6366F1; --t2: #8B5CF6; --glow: rgba(139, 92, 246, .26); --bg1: #F2F0FF; --bg2: #FCFBFF; --dot: rgba(79, 70, 229, .13);
background: radial-gradient(58% 80% at 84% 6%, var(--glow), transparent 70%), radial-gradient(46% 70% at 6% 100%, rgba(99, 102, 241, .14), transparent 70%), linear-gradient(135deg, var(--bg1), var(--bg2));
}
.cvr-art::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 80%); }
.ca-ring { position: absolute; left: 50%; top: 50%; width: min(58%, 290px); aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--t1) 30%, transparent); transform: translate(-50%, -50%); }
.ca-ring::before, .ca-ring::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--t2); opacity: .55; }
.ca-ring::before { left: 8%; top: 20%; }
.ca-ring::after { right: 4%; bottom: 30%; width: 8px; height: 8px; background: var(--t1); }
.ca-tile { position: relative; display: grid; place-items: center; width: min(30%, 148px); aspect-ratio: 1; border-radius: 28%; color: #fff; background: linear-gradient(135deg, var(--t1), var(--t2)); box-shadow: 0 26px 60px color-mix(in srgb, var(--t2) 38%, transparent), 0 8px 18px rgba(15, 23, 42, .1); transform: rotate(-6deg); }
.ca-tile .ca-ic { width: 46%; height: 46%; }
.ca-tile img { width: 100%; height: 100%; border-radius: inherit; }
.ca-tile:has(img) { background: none; }
.ca-amber { --t1: #F59E0B; --t2: #EA580C; --glow: rgba(245, 158, 11, .24); --bg1: #FFF6EA; --bg2: #FFFCF7; --dot: rgba(234, 88, 12, .12); }
.ca-emerald { --t1: #10B981; --t2: #0D9488; --glow: rgba(16, 185, 129, .22); --bg1: #ECFBF4; --bg2: #FAFFFC; --dot: rgba(5, 150, 105, .12); }
.ca-rose { --t1: #F43F5E; --t2: #DB2777; --glow: rgba(244, 63, 94, .2); --bg1: #FFF0F3; --bg2: #FFFAFB; --dot: rgba(219, 39, 119, .11); }
.ca-ink { --t1: #6366F1; --t2: #DB2777; --glow: rgba(124, 58, 237, .5); --bg1: #0B1022; --bg2: #151B38; --dot: rgba(255, 255, 255, .08); }
.ca-ink .ca-tile { background: var(--aurora); }
.ca-ink .ca-ring { border-color: rgba(255, 255, 255, .16); }
.art-cover { max-width: 1128px; }
.art-cover .cvr { aspect-ratio: 21 / 9; border-radius: var(--r-2xl); box-shadow: var(--shadow-md); }
/* ------------------------------------------------------------ article body: contents on the left, prose in the middle */
.art-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: 56px; padding-top: 64px; }
.art-main { grid-column: 2; min-width: 0; }
.art-rail { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 236px; }
.toc { position: sticky; top: 100px; max-height: calc(100vh - 124px); overflow-y: auto; padding-bottom: 12px; }
.toc-h { font: 600 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 6px 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--dim); transition: color .2s, border-color .2s; }
.toc li a:hover { color: var(--text); }
.toc a:focus-visible { outline-offset: -3px; border-radius: 8px; }
.toc li a[aria-current="true"] { color: var(--violet-600); border-left-color: var(--violet-600); font-weight: 600; }
.toc-top { margin-top: 14px; }
.toc-top a { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--faint); }
.toc-top a:hover { color: var(--text); }
.toc-m { margin: 0 0 40px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.toc-m summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 18px; cursor: pointer; font: 600 15px Inter, sans-serif; color: var(--ink); border-radius: 18px; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-n { font-weight: 500; font-size: 13.5px; color: var(--faint); }
.toc-chev { margin-left: auto; color: var(--dim); transition: transform .25s var(--ease); }
.toc-m[open] .toc-chev { transform: rotate(180deg); }
.toc-m ol { list-style: none; margin: 0; padding: 2px 18px 12px; counter-reset: t; border-top: 1px solid var(--line); }
.toc-m li { counter-increment: t; }
.toc-m li a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--text); }
.toc-m li a::before { content: counter(t); flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--mist); font: 600 12px Inter, sans-serif; color: var(--dim); }
@media (min-width: 1200px) { .toc-m { display: none; } }
@media (max-width: 1199px) {
.art-body { grid-template-columns: minmax(0, var(--measure)); justify-content: center; padding-top: 48px; }
.art-main { grid-column: 1; }
.art-rail { display: none; }
}
/* ------------------------------------------------------------ prose */
.prose { font-size: 18px; line-height: 1.75; color: var(--prose); overflow-wrap: break-word; hyphens: manual; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose h2 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.18; letter-spacing: -.025em; color: var(--ink); margin: 2.1em 0 .6em; scroll-margin-top: 8px; text-wrap: balance; }
.prose h3 { font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); margin: 1.8em 0 .45em; scroll-margin-top: 8px; text-wrap: balance; }
.prose h2 + h3 { margin-top: .8em; }
.prose a { color: var(--violet-600); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(79, 70, 229, .32); transition: text-decoration-color .2s, color .2s; }
.prose a:hover { color: var(--ink); text-decoration-color: currentColor; }
.prose strong, .prose b { font-weight: 600; color: var(--ink); }
.prose ul, .prose ol { list-style: none; margin: 0 0 1.2em; padding: 0; }
.prose li { position: relative; margin-top: .5em; }
.prose ul > li { padding-left: 28px; }
.prose ul > li::before { content: ""; position: absolute; left: 6px; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 4px var(--violet-50); }
.prose ol { counter-reset: n; }
.prose ol > li { counter-increment: n; padding-left: 40px; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: .18em; width: 27px; height: 27px; border-radius: 9px; background: var(--violet-50); color: var(--violet-600); font: 600 13.5px/27px Inter, sans-serif; text-align: center; }
.prose blockquote { margin: 1.8em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--violet); font-size: 19px; color: var(--ink); }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.6em 0; }
.prose code { font: 500 .88em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--mist); padding: .1em .35em; border-radius: 6px; }
.prose .num, .prose td, .prose th { font-variant-numeric: tabular-nums; }
/* summary box: the key points first */
.cp-summary { margin: 0 0 2.4em; padding: 24px 26px 22px; border-radius: 22px; border: 1px solid #E4E1FB; background: linear-gradient(180deg, #F6F5FF, #FFFFFF 90%); }
.cp-summary-h { font: 600 12.5px/1 Inter, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); margin: 0 0 14px !important; }
.prose .cp-summary ul { margin: 0; }
.prose .cp-summary li { padding-left: 34px; font-size: 16.5px; line-height: 1.6; color: var(--text); }
.prose .cp-summary li + li { margin-top: .7em; }
.prose .cp-summary li::before { left: 0; top: .15em; width: 22px; height: 22px; border-radius: 7px; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; box-shadow: none; }
/* notes: info (violet), tip (emerald), warning (amber) */
.cp-note { position: relative; margin: 1.8em 0; padding: 18px 20px 18px 58px; border-radius: 18px; background: var(--violet-50); color: #2E2A78; font-size: 16.5px; line-height: 1.65; }
.cp-note::before { content: ""; position: absolute; left: 20px; top: 20px; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--note-ic) center / contain no-repeat; mask: var(--note-ic) center / contain no-repeat; opacity: .9; }
.cp-note { --note-ic: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.cp-note.is-tip { background: var(--emerald-50); color: #064E3B; --note-ic: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
.cp-note.is-warn { background: #FFF6E5; color: #6B3F05; --note-ic: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.prose .cp-note p { margin: 0 0 .6em; }
.prose .cp-note > :last-child { margin-bottom: 0; }
.prose .cp-note b, .prose .cp-note strong, .prose .cp-note a { color: inherit; }
.prose .cp-note a { text-decoration-color: currentColor; }
/* a quote with its source */
.cp-quote { margin: 2.2em 0; padding: 2px 0 2px 26px; border-left: 3px solid transparent; border-image: var(--aurora) 1; }
.cp-quote blockquote { margin: 0; padding: 0; border: 0; font: 500 clamp(21px, 2vw, 25px)/1.45 Outfit, Inter, sans-serif; letter-spacing: -.012em; color: var(--ink); }
.cp-quote blockquote p { margin: 0; }
.cp-quote figcaption { margin-top: 12px; font-size: 14.5px; color: var(--dim); }
/* tables: scroll inside their frame on a narrow phone, never the page */
.cp-table { margin: 1.9em 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; box-shadow: var(--shadow-sm); }
.cp-table table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.cp-table th, .cp-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cp-table thead th { background: var(--mist); font: 600 13px/1.4 Inter, sans-serif; color: var(--dim); white-space: nowrap; }
.cp-table tbody th { font-weight: 600; color: var(--ink); }
.cp-table tfoot th, .cp-table tfoot td { background: #F8F7FF; font-weight: 600; color: var(--ink); border-bottom: 0; border-top: 1px solid #E4E1FB; }
.cp-table tbody tr:last-child > * { border-bottom: 0; }
.cp-table .num { text-align: right; white-space: nowrap; }
.cp-table .yes { color: #047857; font-weight: 600; }
.cp-table caption { caption-side: bottom; text-align: left; padding: 11px 16px 13px; font-size: 13.5px; line-height: 1.5; color: var(--faint); border-top: 1px solid var(--line); }
/* cards: two or three options side by side */
.cp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 196px), 1fr)); gap: 12px; margin: 1.8em 0; }
.cp-card { position: relative; padding: 20px 20px 18px; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.cp-card-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; margin-bottom: 14px; background: var(--violet-50); color: var(--violet-600); }
.cp-card-ic .ic { width: 20px; height: 20px; }
.cp-card h3, .prose .cp-card h3 { font-size: 18.5px; line-height: 1.25; letter-spacing: -.015em; margin: 0 0 6px; }
.cp-card p, .prose .cp-card p { font-size: 15px; line-height: 1.6; color: var(--dim); margin: 0; }
.cp-card p + p { margin-top: .6em; }
.cp-card .cp-card-k, .prose .cp-card .cp-card-k { display: block; font: 600 12px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-600); margin: 0 0 10px; }
/* a plain link in the text of a card, a person or a section head (outside .prose) looks like one */
:is(.cp-card, .cp-person, .cp-sec-head) p a:not([class]), .cp-facts dd a:not([class]) { color: var(--violet-600); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(79, 70, 229, .32); transition: text-decoration-color .2s, color .2s; }
:is(.cp-card, .cp-person, .cp-sec-head) p a:not([class]):hover, .cp-facts dd a:not([class]):hover { color: var(--ink); text-decoration-color: currentColor; }
/* inside running text the column is too narrow for three side by side: each card becomes a row,
its label and title left, its text right (phones: stacked again) */
.prose .cp-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) {
.prose .cp-card { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); column-gap: 24px; align-items: start; padding: 20px 22px; }
.prose .cp-card > * { grid-column: 1; }
.prose .cp-card > p:not(.cp-card-k) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.prose .cp-card h3 { margin: 0; }
}
/* key figures */
.cp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin: 1.8em 0 .6em; }
.cp-stat { padding: 20px 22px; border-radius: 18px; background: var(--mist); }
.cp-stat b { display: block; font: 600 clamp(28px, 3vw, 36px)/1.05 Outfit, Inter, sans-serif; letter-spacing: -.03em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.cp-stat span { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--dim); }
.cp-src { font-size: 13.5px !important; line-height: 1.5; color: var(--faint); margin: 0 0 1.6em !important; }
.prose .cp-src a { color: inherit; }
/* questions and answers */
.cp-faq { margin-top: 2.4em; }
.cp-faq details { border-bottom: 1px solid var(--line); }
.cp-faq h2 + details, .cp-faq > details:first-child { border-top: 1px solid var(--line); }
.cp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 18px 0; cursor: pointer; font: 600 18px/1.35 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F172A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease), background-color .2s; }
.cp-faq details[open] summary::after { transform: rotate(45deg); }
.cp-faq summary:hover::after { background-color: var(--violet-50); }
.cp-faq details > :not(summary) { margin: 0 0 18px; font-size: 17px; line-height: 1.7; color: var(--dim); }
.cp-faq details > p:not(:last-child) { margin-bottom: 10px; }
/* sources */
.cp-sources { margin-top: 2.8em; padding-top: 22px; border-top: 1px solid var(--line); }
.prose .cp-sources h2 { font: 600 12.5px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin: 0 0 12px; }
.prose .cp-sources ol > li { font-size: 14.5px; line-height: 1.55; color: var(--dim); padding-left: 30px; }
.prose .cp-sources ol > li::before { width: 20px; height: 20px; top: .12em; font-size: 11.5px; line-height: 20px; border-radius: 6px; background: var(--mist); color: var(--dim); }
/* a link that leads on (to the landing page, the app): a quiet button with an arrow */
.cp-go { margin: 1.4em 0 1.8em; }
.prose .cp-go a, .cp-go a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 16px/1.2 Inter, sans-serif; text-decoration: none; transition: background .2s, transform .2s var(--ease); }
.cp-go a::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease); }
.prose .cp-go a:hover, .cp-go a:hover { background: #1b2340; color: #fff; }
.cp-go a:hover::after { transform: translateX(3px); }
.cp-go.is-soft a { background: var(--violet-50); color: var(--violet-600); }
.prose .cp-go.is-soft a:hover, .cp-go.is-soft a:hover { background: #E2E5FF; color: var(--violet-600); }
/* a figure with its caption */
.cp-figure { margin: 2em 0; }
.cp-figure img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--mist); }
.cp-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--faint); }
/* the end of an article: who wrote it, when */
.art-foot { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.art-author { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.art-author p { display: grid; gap: 2px; line-height: 1.35; }
.art-author-k { font: 600 11.5px/1.4 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.art-author b { font: 600 19px/1.25 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.art-author p span:last-child { font-size: 14.5px; color: var(--dim); }
.art-about { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; font-size: 14.5px; color: var(--violet-600); }
.art-about .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.art-about:hover .ic { transform: translateX(3px); }
.art-dates { margin-top: 16px; font-size: 13.5px; color: var(--faint); }
/* ------------------------------------------------------------ article cards (index, related) */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bgrid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bc { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 24px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
.bc-cover { display: block; aspect-ratio: 16 / 10; overflow: hidden; min-height: 0; }
.bc-cover .cvr { width: 100%; height: 100%; }
.bc-cover .cvr-photo img { transition: transform .8s var(--ease); }
.bc-cover .ca-tile { width: min(30%, 96px); }
.bc-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 20px 22px 22px; }
.bc-meta, .bf-k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--dim); }
/* The dot between two facts (topic and reading time, date and reading time) belongs to the second
one. When that fact wraps to a line of its own, its dot would start the line like a stray bullet.
So every fact sits behind a 19 px strip that holds its dot, and the row is shifted left by one
strip and clipped there: a fact that starts a line loses its dot, one that follows keeps it. */
.bc-meta, .art-facts { column-gap: 0; margin-left: -19px; clip-path: inset(0 0 0 19px); }
.bc-meta > *, .art-facts > * { padding-left: 19px; }
.bc-min { position: relative; white-space: nowrap; }
.bc-min::before { content: ""; position: absolute; left: 8px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: currentColor; opacity: .55; }
.bc-cat { font: 600 12px/1.2 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-600); }
.bc-t { font-size: 21px; line-height: 1.24; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bc-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bc-t a:focus-visible { outline: none; }
.bc:has(.bc-t a:focus-visible) { outline: 3px solid var(--violet-600); outline-offset: 3px; }
.bc-x { font-size: 15px; line-height: 1.55; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-by { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 13.5px; color: var(--dim); }
.bc-by > span:not(.av-s) { font-weight: 600; color: var(--text); }
.bc-by time { margin-left: auto; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
.bc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #DADDF0; }
.bc:hover .cvr-photo img { transform: scale(1.04); }
.bc:hover .bc-t a { color: var(--violet-600); }
}
@media (max-width: 1100px) {
.bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
/* the last card when it would stand alone in its row (content.js marks it): it spans the row, its
picture one column wide and in line with the pictures above, its text beside it */
.bgrid { --bw-pic: calc((100% - 48px) / 3); }
.bgrid > .bc.bc-wide { grid-column: 1 / -1; display: grid; grid-template-columns: var(--bw-pic) minmax(0, 1fr); }
.bc-wide .bc-cover { aspect-ratio: auto; width: 100%; height: 100%; min-height: 236px; }
.bc-wide .bc-body { justify-content: center; gap: 12px; padding: 32px 44px; }
.bc-wide .bc-t { font-size: clamp(23px, 2.1vw, 28px); line-height: 1.18; letter-spacing: -.025em; max-width: 30ch; }
.bc-wide .bc-x { font-size: 16px; max-width: 62ch; }
.bc-wide .bc-by { margin-top: 6px; padding-top: 4px; }
.bc-wide .bc-by time { margin-left: 6px; }
.bc-wide .bc-by time::before { content: "·"; margin-right: 8px; color: var(--faint); }
@media (max-width: 1100px) { .bgrid { --bw-pic: calc((100% - 18px) / 2); } .bc-wide .bc-body { padding: 28px 32px; } }
/* phones: a compact row, the picture left, so a long list stays scannable */
@media (max-width: 640px) {
.bgrid, .bgrid-2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.bc, .bgrid > .bc.bc-wide { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-radius: 20px; }
.bc-wide .bc-cover { aspect-ratio: auto; }
.bc-wide .bc-body { gap: 6px; padding: 14px 16px; }
.bc-wide .bc-t { font-size: 17px; line-height: 1.28; }
.bc-wide .bc-x { font-size: 14px; }
.bc-cover { aspect-ratio: auto; height: 100%; min-height: 132px; }
.bc-cover .ca-tile { width: 46%; }
.bc-cover .ca-ring { display: none; }
.bc-body { gap: 6px; padding: 14px 16px 14px; }
.bc-meta { font-size: 12px; row-gap: 3px; }
.bc-cat { font-size: 11px; letter-spacing: .1em; }
.bc-t { font-size: 17px; line-height: 1.28; }
.bc-x { font-size: 14px; -webkit-line-clamp: 2; }
.bc-by { display: none; }
}
/* ------------------------------------------------------------ related articles, call to action, newsletter */
.cp-more { margin-top: 96px; padding: 88px 0 24px; background: linear-gradient(var(--mist), rgba(244, 246, 251, 0) 88%); }
.more-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.more-head h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -.03em; margin-top: 10px; }
.more-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--violet-600); white-space: nowrap; }
.more-all .ic { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.more-all:hover .ic { transform: translateX(3px); }
.cp-cta { padding: 72px 0 0; }
.cp-cta:last-child { padding-bottom: 104px; }
.gl-body { padding-bottom: 24px; }
.cb { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px 56px; padding: 64px; border-radius: var(--r-3xl); background: var(--ink); color: #fff; }
.cb::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(44% 70% at 88% 12%, rgba(124, 58, 237, .5), transparent 70%), radial-gradient(40% 70% at 4% 100%, rgba(99, 102, 241, .32), transparent 70%), radial-gradient(30% 50% at 60% 110%, rgba(219, 39, 119, .22), transparent 70%); }
.cb::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 90% at 80% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 90% at 80% 30%, #000 20%, transparent 75%); }
.cb .kicker { color: #A5B4FC; }
.cb h2 { color: #fff; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.035em; margin-top: 14px; max-width: 760px; text-wrap: balance; }
.cb-text > p:last-child { color: rgba(255, 255, 255, .74); font-size: 18px; line-height: 1.55; margin-top: 18px; max-width: 580px; text-wrap: pretty; }
.cb-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.cb :focus-visible { outline-color: #A5B4FC; }
.cb-both { grid-template-columns: 1fr; align-items: start; }
.cb-head { text-align: center; }
.cb-head h2 { margin-left: auto; margin-right: auto; }
.cb-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cb-door { position: relative; display: block; min-height: 300px; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); transition: transform .35s var(--ease); }
.cb-door img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--ease); }
.cb-door::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 16, 34, 0) 25%, rgba(11, 16, 34, .86) 100%); }
.cb-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 22px 24px; }
.cb-kick { justify-self: start; padding: 5px 11px; border-radius: 999px; font: 600 12.5px Inter, sans-serif; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cb-copy b { font: 600 clamp(22px, 2.2vw, 27px)/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.cb-copy > span:not(.cb-kick):not(.cb-go) { color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 1.5; }
.cb-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; }
.cb-go .ic { transition: transform .25s var(--ease); }
@media (hover: hover) {
.cb-door:hover { transform: translateY(-3px); }
.cb-door:hover img { transform: scale(1.04); }
.cb-door:hover .cb-go .ic { transform: translateX(4px); }
}
.cp-boxes { padding: 72px 0 104px; }
.cp-boxes-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cp-boxes-one .cp-boxes-in { grid-template-columns: minmax(0, 720px); justify-content: center; }
.nl, .guest { position: relative; padding: 34px; border-radius: var(--r-2xl); }
.nl { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.nl-form { margin-top: auto; }
.guest { display: flex; flex-direction: column; background: linear-gradient(160deg, var(--violet-50), #F8F7FF 55%, #FFFFFF); border: 1px solid #E3E1FA; }
.nl-head { display: flex; align-items: flex-start; gap: 16px; }
.box-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: var(--aurora); box-shadow: 0 10px 24px rgba(99, 102, 241, .3); }
.box-ic .ic { width: 22px; height: 22px; }
.box-ic-soft { color: var(--violet-600); background: #fff; box-shadow: var(--shadow-sm); }
.box-k { font: 600 12px/1 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-600); margin-bottom: 8px; }
.box-h { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.box-p { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }
.wr-offer { margin-top: 20px; font: 600 19px/1.4 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.guest .box-p { margin-top: 10px; }
.wr-go { margin-top: auto; padding-top: 22px; }
.wr-go .btn .ic { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.wr-go .btn:hover .ic { transform: translateX(3px); }
.box-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--faint); }
.box-note a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
/* ------------------------------------------------------------ forms (contact, newsletter) */
.f-hp { display: none !important; }
.fi { display: block; width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--field); background: #fff; font: 400 16px/1.4 Inter, sans-serif; color: var(--text); transition: border-color .2s, box-shadow .2s, background-color .2s; -webkit-appearance: none; appearance: none; }
.fi::placeholder { color: var(--faint); opacity: 1; }
.fi:hover { border-color: var(--dim); }
.fi:focus, .fi:focus-visible { outline: none; border-color: var(--violet); box-shadow: var(--ring); }
.fi[aria-invalid="true"] { border-color: #E11D48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .1); }
textarea.fi { height: auto; min-height: 176px; padding: 14px 16px; line-height: 1.6; resize: vertical; }
.fld label { display: block; margin-bottom: 8px; font: 600 14px/1.3 Inter, sans-serif; color: var(--text); }
.fld .f-req { color: var(--violet-600); }
.fld .opt { font-weight: 500; color: var(--faint); }
.sel { position: relative; }
.sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.sel .fi { padding-right: 44px; cursor: pointer; }
.f-err { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 13.5px; line-height: 1.45; font-weight: 500; color: #BE123C; }
.f-err[hidden] { display: none; }
.f-err::before { content: ""; flex: none; width: 15px; height: 15px; margin-top: 2px; background: currentColor; -webkit-mask: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.nl-row { display: flex; gap: 10px; margin-top: 22px; }
.nl-row .fi { flex: 1; min-width: 0; }
.nl-btn { height: 52px; flex: none; min-width: 148px; }
/* the send button: its label stays, a spinner joins it while sending */
.btn .b-busy { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: cp-spin .8s linear infinite; }
form.is-busy .btn .b-busy { display: inline-block; }
form.is-busy .btn { pointer-events: none; opacity: .92; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
.f-state:empty { display: none; }
.f-state { margin-top: 16px; }
.f-msg { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 16px; font-size: 15px; line-height: 1.55; }
.f-msg .ic { width: 20px; height: 20px; margin-top: 2px; }
.f-msg b { display: block; font-weight: 600; }
.f-msg a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.f-msg.is-ok { background: var(--emerald-50); color: #065F46; }
.f-msg.is-bad { background: #FFF1F2; color: #9F1239; }
.nl.is-done .nl-form { display: none; }
.f-done { display: grid; justify-items: start; gap: 10px; }
.f-done[hidden] { display: none; }
.f-done-ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: var(--emerald); box-shadow: 0 12px 26px rgba(16, 185, 129, .3); }
.f-done-ic .ic { width: 24px; height: 24px; }
.f-done h3 { font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-top: 8px; }
.f-done p { color: var(--dim); font-size: 16px; line-height: 1.6; max-width: 480px; }
.f-done .btn { margin-top: 8px; }
.nl .f-done { margin-top: 22px; }
.nl .f-done h3 { font-size: 20px; }
/* ------------------------------------------------------------ blog index */
.cat-anchor { position: fixed; top: 0; left: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }
.t-blog .cp-head { padding-bottom: 56px; }
.bl-feat .wrap { max-width: 1248px; }
.bf { position: relative; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); border-radius: var(--r-3xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.bf-cover { display: block; min-height: 420px; overflow: hidden; }
.bf-cover .cvr { width: 100%; height: 100%; }
.bf-cover .ca-tile { width: min(28%, 150px); }
.bf-cover .cvr-photo img { transition: transform .9s var(--ease); }
.bf-body { display: flex; flex-direction: column; gap: 16px; padding: 48px 48px 44px; }
.bf-badge { padding: 5px 10px; border-radius: 999px; background: var(--violet-50); color: var(--violet-600); font: 600 12px/1.2 Inter, sans-serif; }
.bf-t { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.bf-t a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bf-t a:focus-visible { outline: none; }
.bf:has(.bf-t a:focus-visible) { outline: 3px solid var(--violet-600); outline-offset: 4px; }
.bf-x { font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
.bf .bc-by { margin-top: auto; padding-top: 12px; }
.bf .bc-by time { margin-left: 4px; }
.bf .bc-by time::before { content: "·"; margin-right: 8px; color: var(--faint); }
.bf-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--violet-600); }
.bf-go .ic { transition: transform .25s var(--ease); }
@media (hover: hover) {
.bf:hover { transform: translateY(-3px); box-shadow: 0 36px 90px rgba(15, 23, 42, .16), 0 8px 20px rgba(15, 23, 42, .06); }
.bf:hover .cvr-photo img { transform: scale(1.03); }
.bf:hover .bf-go .ic { transform: translateX(4px); }
}
.bl-all { padding-top: 88px; }
.bl-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; }
.bl-bar h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; }
.bl-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bl-filter a { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14.5px/1 Inter, sans-serif; color: var(--dim); white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.bl-filter a:hover { color: var(--text); border-color: #CDD2E2; }
/* the active topic: "Alle" until a topic is the target (per topic rules: in the page, from content.py) */
.bl-filter a[href="#thema-alle"], .bl-filter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-anchor:not(#thema-alle):target ~ .bl-all:not([data-topic]) .bl-filter a[href="#thema-alle"],
.bl-all[data-topic] .bl-filter a[href="#thema-alle"]:not([aria-current="true"]) { background: #fff; border-color: var(--line); color: var(--dim); }
.bl-empty { padding: 40px 0; color: var(--dim); }
/* ------------------------------------------------------------ sections of the other pages */
.cp-sec { padding: 56px 0; }
.cp-sec.is-mist { background: var(--mist); padding: 80px 0; }
.cp-sec:not(.is-mist) + .cp-sec:not(.is-mist) { padding-top: 8px; }
.cp-head + .cp-sec { padding-top: 16px; }
.cp-sec-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.cp-sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; margin-top: 10px; text-wrap: balance; }
.cp-sec-head p:not(.kicker) { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }
.cp-h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.025em; color: var(--ink); margin: 0 0 20px; text-wrap: balance; }
.cp-narrow { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.cp-mid { max-width: 960px; margin-left: auto; margin-right: auto; }
.cp-lead { font-size: clamp(20px, 1.8vw, 23px); line-height: 1.55; color: var(--ink); letter-spacing: -.005em; text-wrap: pretty; }
/* a list with checks */
.prose ul.cp-check > li, ul.cp-check > li, .prose ul.cp-open > li, ul.cp-open > li { padding-left: 34px; }
ul.cp-check, ul.cp-open { list-style: none; margin: 0 0 1.2em; padding: 0; }
ul.cp-check > li, ul.cp-open > li { position: relative; margin-top: .6em; }
.prose ul.cp-check > li::before, ul.cp-check > li::before, .prose ul.cp-open > li::before, ul.cp-open > li::before { content: ""; position: absolute; left: 0; top: .25em; width: 22px; height: 22px; border-radius: 7px; box-shadow: none; background: var(--emerald-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.prose ul.cp-open > li::before, ul.cp-open > li::before { background: #FFF6E5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center / 12px no-repeat; }
/* facts: a definition list as a table (press) */
.cp-facts { margin: 0; border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.cp-facts > div { display: grid; grid-template-columns: minmax(140px, 34%) minmax(0, 1fr); gap: 4px 24px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.cp-facts > div:last-child { border-bottom: 0; }
.cp-facts dt { font-size: 14.5px; font-weight: 600; color: var(--dim); }
.cp-facts dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.cp-facts a { color: var(--violet-600); font-weight: 500; }
/* a text to copy (press boilerplate), with its button */
.cp-copy { position: relative; padding: 26px 28px; border-radius: 22px; background: var(--mist); border: 1px solid var(--line); }
.cp-copy-t { font-size: 17px; line-height: 1.7; color: var(--text); }
.cp-copy-t p + p { margin-top: .8em; }
.cp-copy-b { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 14px Inter, sans-serif; color: var(--text); cursor: pointer; }
.cp-copy-b:hover { border-color: #CDD2E2; }
.cp-copy-b.is-done { color: #047857; border-color: rgba(16, 185, 129, .45); }
/* downloads (press) */
.cp-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.cp-dl a { display: grid; grid-template-rows: auto 1fr; border-radius: 22px; border: 1px solid var(--line); background: #fff; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s; }
.cp-dl-prev { display: grid; place-items: center; height: 176px; background: var(--mist); padding: 22px; overflow: hidden; }
.cp-dl-prev img { width: auto; height: auto; max-width: 100%; max-height: 132px; object-fit: contain; border-radius: 12px; box-shadow: var(--shadow-sm); }
.cp-dl-t { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.cp-dl-t b { display: block; font-size: 15.5px; color: var(--ink); }
.cp-dl-t small { display: block; font-size: 13px; color: var(--faint); }
.cp-dl-t .ic { margin-left: auto; color: var(--violet-600); }
@media (hover: hover) { .cp-dl a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } }
/* people (about, press) */
.cp-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cp-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.cp-person .av-a { grid-row: span 3; width: 64px; height: 64px; font-size: 20px; }
/* the founders' portraits, as on the about page (grey, round) */
.cp-person .av-pic { width: 72px; height: 72px; overflow: hidden; background: #05070F; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.av-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.cp-person h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.015em; }
.cp-person .role { font-size: 14px; font-weight: 600; color: var(--violet-600); }
.cp-person p:not(.role) { font-size: 15.5px; line-height: 1.6; color: var(--dim); }
/* a contact card with a big address */
.cp-mailcard { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 28px 32px; border-radius: 24px; background: var(--ink); color: #fff; }
.cp-mailcard p { color: rgba(255, 255, 255, .72); }
.cp-mailcard a.cp-mailcard-mail { display: inline-flex; align-items: center; min-height: 44px; font: 600 clamp(20px, 2.4vw, 28px) Outfit, Inter, sans-serif; letter-spacing: -.02em; color: #fff; overflow-wrap: anywhere; }
.cp-mailcard .btn { margin-left: auto; }
.cp-mailcard :focus-visible { outline-color: #A5B4FC; }
/* ------------------------------------------------------------ contact page */
.ctc { padding: 0 0 24px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.ct-form { padding: 40px; border-radius: var(--r-3xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ct-h { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.ct-sub { margin-top: 8px; font-size: 15px; color: var(--dim); }
.cf { margin-top: 26px; }
.cf-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.cf > * + * { margin-top: 20px; }
.cf-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.cf-btn { height: 54px; padding: 0 26px; font-size: 16.5px; }
.cf-btn .ic { width: 18px; height: 18px; }
.cf-foot .box-note { flex: 1 1 240px; margin: 0; }
.ct-side { display: grid; gap: 16px; }
.ct-card { padding: 28px; border-radius: var(--r-2xl); background: var(--mist); }
.ct-card h2 { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
.ct-mail { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); font: 600 17px/1.3 Inter, sans-serif; color: var(--ink); overflow-wrap: anywhere; transition: box-shadow .2s; }
.ct-mail .box-ic { width: 40px; height: 40px; border-radius: 12px; }
.ct-mail .box-ic .ic { width: 19px; height: 19px; }
.ct-mail:hover { box-shadow: var(--shadow-md); }
.ct-social { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ct-social a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--text); }
.ct-social a:hover { border-color: #CDD2E2; }
.ct-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: s; }
.ct-steps li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 14px; }
.ct-steps li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-sm); font: 600 13px Inter, sans-serif; color: var(--violet-600); }
.ct-steps b { font-size: 15.5px; color: var(--ink); }
.ct-steps span { font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.ct-links { list-style: none; margin: 10px 0 0; padding: 0; }
.ct-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text); }
.ct-links li:last-child a { border-bottom: 0; }
.ct-links a .ic { width: 16px; height: 16px; color: var(--faint); transition: transform .25s var(--ease), color .2s; }
.ct-links a:hover .ic { transform: translateX(3px); color: var(--violet-600); }
.ct-co { padding: 4px 4px 0; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.ct-co a { text-decoration: underline; text-underline-offset: 2px; }
.ct-faq { padding: 88px 0 8px; }
.ct-faq .cp-faq { margin-top: 0; }
/* ------------------------------------------------------------ glossary */
.gl-count { margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--violet-600); }
.gl-bar { position: sticky; top: 68px; z-index: 30; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gl-bar ol { position: relative; list-style: none; margin: 0 auto; padding: 6px 0; display: flex; justify-content: center; gap: 2px; max-width: 1040px; }
.gl-bar li { flex: 1 1 0; }
.gl-bar a, .gl-bar span { display: grid; place-items: center; height: 44px; border-radius: 10px; font: 600 14.5px/1 Inter, sans-serif; }
.gl-bar a { color: var(--ink); }
.gl-bar a:hover, .gl-bar a[aria-current] { background: var(--violet-50); color: var(--violet-600); }
.gl-bar span { color: #C4C9D8; }
.gl-wrap { padding-top: 48px; }
.gl-intro { max-width: var(--measure); margin: 0 auto 24px; }
/* 860 px: a definition runs about as many characters per line as an article's text (about 75) */
.gl-sec { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 40px; max-width: 860px; margin: 0 auto; padding: 36px 0; border-top: 1px solid var(--line); }
.gl-l { position: sticky; top: 136px; align-self: start; font-size: 64px; line-height: .9; letter-spacing: -.04em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gl-list { display: grid; gap: 14px; }
.gl-term { padding: 22px 24px; border-radius: 20px; border: 1px solid var(--line); background: #fff; transition: box-shadow .4s, border-color .4s, background-color .6s; }
.gl-term h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.02em; }
.gl-term p { margin-top: 8px; font-size: 16.5px; line-height: 1.7; color: var(--prose); }
.gl-term a { color: var(--violet-600); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(79, 70, 229, .32); }
.gl-term .gl-see { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; font-size: 13.5px; color: var(--faint); }
.gl-see a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--mist); font-weight: 600; font-size: 13.5px; color: var(--text); text-decoration: none; }
.gl-see a:hover { background: var(--violet-50); color: var(--violet-600); }
.gl-term:target { border-color: rgba(99, 102, 241, .5); box-shadow: var(--ring); background: #FBFAFF; }
.gl-outro { max-width: 860px; margin: 0 auto; }
/* ------------------------------------------------------------ phones and tablets */
@media (max-width: 1100px) {
.bf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.bf-body { padding: 36px; }
.ct-grid { grid-template-columns: minmax(0, 1fr); }
.ct-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 860px) {
.cp-head { padding: 112px 0 44px; }
.art-head { padding: 104px 0 32px; }
.art-cover .cvr { border-radius: 22px; }
.bf { grid-template-columns: minmax(0, 1fr); border-radius: 28px; }
.bf-cover { min-height: 0; aspect-ratio: 16 / 10; }
.bf-body { padding: 26px 24px 28px; gap: 12px; }
.bf-x { font-size: 16px; }
.bl-all { padding-top: 64px; }
.cb { grid-template-columns: minmax(0, 1fr); padding: 44px 28px; border-radius: 28px; }
.cb-actions { justify-content: flex-start; }
.cb-doors { grid-template-columns: minmax(0, 1fr); }
.cb-door { min-height: 260px; }
.cp-boxes-in { grid-template-columns: minmax(0, 1fr); }
.cp-boxes { padding: 56px 0 72px; }
.cp-more { margin-top: 72px; padding-top: 64px; }
.more-head { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.ct-form { padding: 28px 22px; border-radius: 28px; }
.gl-sec { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 28px 0; }
.gl-l { position: static; font-size: 48px; }
.cp-facts > div { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; }
.cp-mailcard .btn { margin-left: 0; }
}
@media (max-width: 700px) {
.cp-h1 { font-size: clamp(34px, 9.6vw, 44px); }
.art-h1 { font-size: clamp(32px, 9vw, 42px); }
.cp-head, .art-head { text-align: left; }
.cp-lede, .art-lede, .cp-h1, .art-h1 { margin-left: 0; margin-right: 0; }
.crumbs ol { justify-content: flex-start; }
.cp-sec-head { text-align: left; margin-left: 0; }
.art-meta { display: flex; justify-content: flex-start; gap: 12px 14px; }
.art-by { padding-right: 0; border-right: 0; }
.art-facts { min-height: 0; width: calc(100% + 19px); }
.art-cover .cvr { aspect-ratio: 16 / 10; }
.prose { font-size: 17px; line-height: 1.72; }
.cp-summary { padding: 20px 18px 18px; }
.cp-note { padding: 16px 16px 16px 50px; font-size: 16px; }
.cp-note::before { left: 16px; top: 18px; width: 20px; height: 20px; }
.cp-table th, .cp-table td { padding: 11px 12px; font-size: 14.5px; }
.nl, .guest { padding: 24px 20px; border-radius: 24px; }
.nl-row { flex-direction: column; }
.nl-row .fi { flex: none; }
.nl-btn { width: 100%; }
.cf-2 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cf-btn { width: 100%; }
.art-about { margin-left: 0; }
.bl-filter { width: 100%; margin: 0 -16px; }
.bl-filter ul { flex-wrap: nowrap; overflow-x: auto; padding: 4px 16px 6px; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.bl-filter ul::-webkit-scrollbar { display: none; }
/* the letters scroll sideways: the row fades out on the right and a letter always shows in part,
so it reads as more to come (like the blog's topics); the letter you read stays in view (content.js) */
.gl-bar ol { justify-content: flex-start; gap: 4px; overflow-x: auto; padding: 4px 16px; margin: 0 -16px; scrollbar-width: none; scroll-padding-inline: 16px 64px; -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
.gl-bar.is-end ol { -webkit-mask-image: none; mask-image: none; }
.gl-bar ol::-webkit-scrollbar { display: none; }
.gl-bar li { flex: 0 0 44px; }
.gl-bar a, .gl-bar span { height: 44px; }
.gl-term { padding: 18px; }
/* touch targets of 44 px, like the rest of the site: the chips are 40 px with 2 px more to tap
above and below, the gaps between them 8 px; the crumbs and the big mail address get the height */
.gl-term .gl-see { gap: 8px; }
.gl-see a { position: relative; height: 40px; padding: 0 14px; }
.gl-see a::after { content: ""; position: absolute; inset: -2px 0; }
.crumbs a { min-height: 44px; }
}
/* phones without a mouse scroll the topic row; a narrow window with a mouse wraps it */
@media (max-width: 700px) and (hover: hover) and (pointer: fine) {
.bl-filter ul { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
.bc, .bf, .cb-door, .bc-cover .cvr-photo img, .bf-cover .cvr-photo img { transition: none !important; }
}
@media (forced-colors: active) {
.bl-filter a[aria-current="true"], .toc li a[aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
.bc, .bf, .nl, .guest, .ct-form, .cp-card, .gl-term { border: 1px solid CanvasText; }
}
@media print {
.art-rail, .toc-m, .cp-cta, .cp-boxes, .cp-more, .gl-bar { display: none !important; }
.art-body { display: block; }
}
/* ==========================================================================
Motion (Leon 2026-09-28: "ein paar coole Animationen, ganz im Apple Style").
Calm and physical: parts rise out of a soft blur, settle and glide. Only
transform, opacity and filter, so nothing moves the layout. The reduced
motion rule in site.css stops all of it. Without JavaScript only the page
head animates (pure CSS) and every block stays visible; the scroll reveals
need html.cm, which content.js sets.
========================================================================== */
:root { --cm-ease: cubic-bezier(.16, 1, .3, 1); }
/* 1. the page head arrives part after part: crumbs, title, lede, meta, then the cover */
@keyframes cm-rise { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); filter: blur(12px); } to { opacity: 1; transform: none; filter: none; } }
.cp .art-head .wrap > *, .cp .cp-head .wrap > * { animation: cm-rise 1.1s var(--cm-ease) both; }
.cp .art-head .wrap > :nth-child(2), .cp .cp-head .wrap > :nth-child(2) { animation-delay: .08s; }
.cp .art-head .wrap > :nth-child(3), .cp .cp-head .wrap > :nth-child(3) { animation-delay: .16s; }
.cp .art-head .wrap > :nth-child(4), .cp .cp-head .wrap > :nth-child(4) { animation-delay: .24s; }
.cp .art-head .wrap > :nth-child(n+5), .cp .cp-head .wrap > :nth-child(n+5) { animation-delay: .32s; }
.cp .art-cover .cvr, .cp .bl-feat .bf { animation: cm-rise 1.3s var(--cm-ease) .3s both; }
/* 2. the cover photo settles into its frame while it scrolls through the screen (the frame stays) */
@keyframes cm-settle { from { transform: scale(1.12); } to { transform: scale(1); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.cp .art-cover .cvr-photo img { animation: cm-settle linear both; animation-timeline: view(); animation-range: cover 0% cover 55%; }
}
}
/* 3. blocks below the first screen glide in as they arrive (content.js marks them) */
html.cm .cm-rv { opacity: 0; transform: translate3d(0, 32px, 0); }
html.cm .cm-rv.cm-pop { transform: translate3d(0, 26px, 0) scale(.96); }
html.cm .cm-rv.cm-on { opacity: 1; transform: none; transition: opacity .9s var(--cm-ease), transform 1.1s var(--cm-ease); transition-delay: var(--cm-d, 0s); }
@media print { html.cm .cm-rv { opacity: 1; transform: none; } }
/* 4. the reading bar of an article: a thin gradient line along the top edge */
.cm-bar { position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 3px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet, #6366F1), #A855F7 55%, #EC4899); pointer-events: none; will-change: transform; }
@media print { .cm-bar { display: none; } }
/* 5. the contents marker glides to the section you read instead of jumping */
html.cm .toc ol { position: relative; }
html.cm .toc li a[aria-current="true"] { border-left-color: transparent; }
.toc-ind { position: absolute; left: -1px; top: 0; width: 2px; height: 0; border-radius: 2px; background: var(--violet-600); opacity: 0; pointer-events: none; transition: transform .55s var(--cm-ease), height .55s var(--cm-ease), opacity .3s ease; }
@media (forced-colors: active) { .toc-ind { display: none; } html.cm .toc li a[aria-current="true"] { border-left-color: Highlight; } }
/* 6. a jump to a term or a heading lights it up once, softly */
@keyframes cm-flash { 0%, 30% { background-color: rgba(99, 102, 241, .12); box-shadow: 0 0 0 10px rgba(99, 102, 241, .12); } to { background-color: rgba(99, 102, 241, 0); box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } }
@media (prefers-reduced-motion: no-preference) {
.cp :is(h2, h3, dt, .gl-term):target, .cp .cm-flash { border-radius: 14px; animation: cm-flash 2.2s var(--cm-ease) .35s; }
}
/* 7. the featured article breathes a little under the pointer, like the cards below it */
@media (hover: hover) and (pointer: fine) {
.bf .cvr-photo img, .bf .ca-tile { transition: transform .9s var(--cm-ease); }
.bf:hover .cvr-photo img, .bf:hover .ca-tile { transform: scale(1.035); }
}
/* ==========================================================================
About page (t-about). Leon 2026-09-28: "cooler designen", with Frederic and
him instead of a stock photo. The head and the founders share one dark stage
with a slow aurora; the story runs beside a sticky heading; one sentence
lights up word by word while it crosses the screen (content.js, Motion);
the numbers are big; the team cards carry the real portraits.
========================================================================== */
.t-about .cp-head, .t-about .ab-reel { background: var(--ink); color: #fff; }
.t-about .cp-head { overflow: hidden; padding-bottom: 44px; }
.t-about .cp-head::before { inset: -25% -12% -45%; background: radial-gradient(38% 52% at 24% 34%, rgba(99, 102, 241, .5), transparent 70%), radial-gradient(34% 48% at 78% 28%, rgba(219, 39, 119, .3), transparent 70%), radial-gradient(30% 40% at 52% 100%, rgba(6, 182, 212, .22), transparent 70%); animation: ab-aurora 22s ease-in-out infinite alternate; }
.t-about .cp-head::after { background-image: radial-gradient(rgba(255, 255, 255, .08) 1.2px, transparent 1.2px); }
@keyframes ab-aurora { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.1); } }
.t-about .cp-head .kicker { color: #A5B4FC; }
.t-about .cp-h1 { color: #fff; }
.t-about .cp-lede { color: rgba(226, 232, 255, .74); }
.ab-reel { position: relative; padding: 12px 0 96px; text-align: center; overflow: hidden; }
.ab-strip { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); animation: cm-rise 1.3s var(--cm-ease) .35s both; }
.ab-track { display: flex; gap: 18px; padding-right: 18px; animation: ab-drift 70s linear infinite; }
@keyframes ab-drift { to { transform: translate3d(-100%, 0, 0); } }
.ab-tile { flex: none; width: clamp(150px, 16vw, 232px); aspect-ratio: 3 / 4; margin: 0; border-radius: 22px; overflow: hidden; background: #111827; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .8); }
.ab-tile:nth-child(even) { transform: translateY(28px); }
.ab-tile img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.02); }
.ab-reel-line { max-width: 560px; margin: 64px auto 0; padding: 0 24px; font: 500 clamp(18px, 1.6vw, 21px)/1.45 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: rgba(226, 232, 255, .82); }
@media (prefers-reduced-motion: reduce) { .ab-track { animation: none; } .ab-track[aria-hidden] { display: none; } .ab-strip { width: auto; justify-content: center; overflow: hidden; } }
/* the pause for the reel (WCAG 2.2.2): a round glass button under the strip's right end, in the
dark gap above the line, like the controls under a film */
.ab-stage { position: relative; }
.ab-pause { position: absolute; right: clamp(16px, 4vw, 56px); bottom: -56px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, border-color .2s; }
.ab-pause::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }
.ab-pause:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }
.ab-pause:focus-visible { outline: 3px solid #A5B4FC; outline-offset: 3px; }
.ab-pause svg { width: 12px; height: 12px; fill: currentColor; }
.ab-pause[hidden], .ab-pause .ab-pl { display: none; }
.ab-reel.is-paused .ab-pause .ab-pa { display: none; }
.ab-reel.is-paused .ab-pause .ab-pl { display: block; margin-left: 2px; }
.ab-reel.is-paused .ab-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ab-pause { display: none; } }
.t-about .ab-story { padding-top: 112px; }
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 28px 80px; max-width: 1080px; }
.ab-story-head { position: sticky; top: 112px; align-self: start; }
.ab-story-head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.03em; margin-top: 10px; text-wrap: balance; }
.ab-story-body { max-width: 640px; }
.ab-say { max-width: 1060px; margin: 88px auto; padding: 0 24px; text-align: center; }
.ab-say blockquote { margin: 0; padding: 0; border: 0; }
.ab-say p { margin: 0; font: 600 clamp(30px, 4.6vw, 60px)/1.1 Outfit, Inter, sans-serif; letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
html.cm .ab-say [data-cm-words] .w { color: rgba(11, 16, 34, .15); transition: color .35s ease; }
html.cm .ab-say [data-cm-words] .w.lit { color: var(--ink); }
.ab-say figcaption { margin-top: 24px; font-size: 15px; color: var(--dim); }
/* after the sentence the story ends in one centred reading column, in line with it (Leon) */
.ab-after { max-width: calc(65ch + 48px); }
.ab-after .prose { max-width: 65ch; margin: 0 auto; }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ab-stat { padding: 30px 24px 8px 0; }
.ab-stat + .ab-stat { padding-left: 24px; border-left: 1px solid var(--line); }
.ab-stat b { display: block; font: 600 clamp(52px, 6.4vw, 88px)/1 Outfit, Inter, sans-serif; letter-spacing: -.05em; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-stat span { display: block; max-width: 26ch; margin-top: 14px; font-size: 15px; line-height: 1.45; color: var(--dim); }
.ab-mission .cp-card { padding: 28px 26px 26px; border-radius: 24px; }
.ab-mission .cp-card h3 { font-size: 20px; }
.cp-cards.ab-two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.ab-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 0 auto; }
.ab-person { display: grid; justify-items: center; gap: 22px; padding: 40px 32px 34px; text-align: center; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .5s var(--cm-ease), box-shadow .5s var(--cm-ease); }
@media (hover: hover) and (pointer: fine) { .ab-person:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.ab-pic { width: 168px; height: 168px; border-radius: 50%; overflow: hidden; background: #05070F; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--line), 0 26px 50px -22px rgba(11, 16, 34, .45); }
.ab-pic img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.ab-bio h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.ab-bio .role { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--violet-600); }
.ab-bio p:not(.role) { margin-top: 12px; line-height: 1.6; color: var(--dim); }
.ab-bio .more-all { display: inline-flex; margin-top: 16px; }
.ab-bio p:not(.role) { max-width: 44ch; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) {
.ab-story-grid { grid-template-columns: minmax(0, 1fr); }
.ab-story-head { position: static; }
.ab-say { margin: 64px auto; }
.ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ab-stat:nth-child(3) { padding-left: 0; border-left: 0; }
.ab-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.ab-people, .cp-cards.ab-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.ab-reel { padding-bottom: 72px; }
.ab-person { padding: 30px 22px 26px; }
.ab-pic { width: 136px; height: 136px; }
.ab-stat { padding-right: 12px; }
.ab-stat + .ab-stat { padding-left: 14px; }
.ab-stat:nth-child(odd) { padding-left: 0; }
.ab-stat span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .t-about .cp-head::before { animation: none; } }
/* the bar over the dark stage: light text until it turns to glass (on scroll, or while a menu panel
or the phone sheet is open: both lie on light glass). Only the bar's own row, never the sheet. */
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) > .wrap > .logo b { color: #fff; }
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) > .wrap .mm-btn, body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) .nav-login { color: rgba(226, 232, 255, .78); }
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) > .wrap .mm-btn:hover, body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) .nav-login:hover { color: #fff; }
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) .nav-burger { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) .nav-right .lang { border-color: rgba(255, 255, 255, .24); }
body:has(main.t-about) .nav:not(.scrolled):not(.mm-open) > .wrap :focus-visible { outline-color: #A5B4FC; }
/* an open panel over the dark stage: denser glass, so it reads white and not grey */
body:has(main.t-about) .nav.mm-open .mm-bg { background: rgba(255, 255, 255, .95); }
/* ==========================================================================
Careers page (karriere.html, Leon 2026-09-28): ready before the first job.
The empty state, the job card for later, and the three application steps.
========================================================================== */
.car-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 28px; max-width: 920px; margin: 0 auto; padding: 32px 36px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.car-empty-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--violet, #6366F1), #A855F7 60%, #EC4899); box-shadow: 0 14px 30px -12px rgba(99, 102, 241, .6); }
.car-empty-ic .ic { width: 28px; height: 28px; }
.car-empty p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--dim); }
.car-empty p + p { margin-top: 8px; color: var(--text); }
.car-job { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 920px; margin: 0 auto 12px; padding: 24px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.car-job-k { font-size: 13px; font-weight: 600; color: var(--violet-600); }
.car-steps { counter-reset: car; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 980px; margin: 0 auto; padding: 0; list-style: none; }
.car-steps li { counter-increment: car; position: relative; padding: 64px 24px 24px; border-radius: 24px; background: var(--mist); }
.car-steps li::before { content: counter(car); position: absolute; top: 20px; left: 24px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 600 15px/1 Outfit, Inter, sans-serif; color: #fff; background: var(--ink); }
.car-steps b { display: block; font: 600 19px/1.25 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.car-steps span { display: block; margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--dim); }
.car-note { max-width: 980px; margin: 22px auto 0; font-size: 14.5px; color: var(--dim); text-align: center; }
@media (max-width: 860px) {
.car-empty { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; text-align: left; }
.car-empty .btn { justify-self: start; }
.car-steps { grid-template-columns: minmax(0, 1fr); }
.car-job { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
Legal pages: Impressum, Datenschutz and AGB in German and English
(site/build/legal.py renders them from the app's own legal texts; the
classes lg-narrow and lg-wide stand for the app's sm:hidden and
hidden sm:table-cell). Calm on purpose, the text is the point. Leon
2026-09-28 ("slightly cooler"): a violet glow and a seal in the head,
number badges, the Impressum as a card, a help box at the end.
The head rises like every content page head. The words of the legal
text never move, fade or change case (no text-transform anywhere here:
the page shows the text exactly as the app renders it). Only their frame
arrives: a section's rule draws itself and its badge or icon fills in
(content.js sets lg-rv under html.cm, never with reduced motion; without
JavaScript all of it simply stands there).
========================================================================== */
/* the head: a violet glow behind the title, the document's seal above the kicker */
.t-legal .cp-head { padding: 128px 0 40px; }
.t-legal .cp-head::before {
background:
radial-gradient(30% 62% at 50% 46%, rgba(124, 58, 237, .15), transparent 72%),
radial-gradient(34% 52% at 20% 10%, rgba(99, 102, 241, .12), transparent 70%),
radial-gradient(26% 44% at 82% 16%, rgba(219, 39, 119, .07), transparent 70%);
}
.lg-seal { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 24px; border-radius: 50%; color: var(--violet-600); background: linear-gradient(180deg, #FFFFFF, #F1EFFF); box-shadow: 0 0 0 1px rgba(99, 102, 241, .2), 0 16px 34px -12px rgba(79, 70, 229, .55); }
.lg-seal::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(99, 102, 241, .36); }
.lg-seal::after { content: ""; position: absolute; inset: -30px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, .2), transparent); }
.lg-glyph { width: 26px; height: 26px; }
/* the ring lands like a stamp, once, as the head rises */
@keyframes lg-stamp { from { opacity: 0; transform: scale(1.4) rotate(-40deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .lg-seal::before { animation: lg-stamp 1.3s var(--cm-ease) .3s both; } }
/* the titles are single long words (Datenschutzerklärung, Nutzungsbedingungen): on the narrowest phones
they take a smaller size instead of pushing the page sideways */
@media (max-width: 640px) { .t-legal .cp-h1 { font-size: clamp(26px, 8.6vw, 44px); } }
.lg-lede { font-size: clamp(17px, 1.4vw, 19px); }
.lg-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; }
.lg-meta > * { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .78); font-size: 14.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
.lg-date time { color: var(--ink); font-weight: 500; }
.lg-alt { color: var(--text); font-weight: 500; transition: border-color .2s, background .2s, color .2s; }
.lg-alt:hover { border-color: #CDD2E2; background: #fff; color: var(--ink); }
.lg-alt .flag { width: 18px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }
.t-legal .art-body { padding-top: 44px; padding-bottom: 24px; column-gap: 44px; }
/* the long documents: the contents get a little more room than the empty right side */
@media (min-width: 1200px) {
.t-legal .lg-long .art-body { grid-template-columns: minmax(0, 1.2fr) minmax(0, var(--measure)) minmax(0, .8fr); }
}
/* the running text: a little smaller than an article, the rhythm of a document */
.prose.lg { font-size: 17px; line-height: 1.74; }
.lg > section { position: relative; }
.lg-long .lg > section { padding-top: 2.5em; margin-top: 2.5em; }
.lg-long .lg > section:first-child, .lg-long .lg .lg-intro + section { margin-top: 0; padding-top: 0; }
/* the rule above a section is drawn by ::before, so it can draw itself in (Motion, below) */
.lg-long .lg > section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(99, 102, 241, .5), rgba(99, 102, 241, .16) 28%, var(--line) 56%); transform-origin: 0 50%; }
.lg-long .lg > section:first-child::before, .lg-long .lg .lg-intro + section::before { display: none; }
.lg h2 { font-size: clamp(21px, 1.9vw, 24px); line-height: 1.3; letter-spacing: -.02em; margin: 0 0 .8em; }
/* the section number as a badge: the number stays the app's text, the tile behind it is ::before */
.lg h2 .lg-n { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-width: 1.95em; height: 1.6em; padding: 0 .42em; margin-right: .36em; border-radius: .5em; font: 600 .74em/1 Inter, sans-serif; letter-spacing: 0; color: var(--violet-600); font-variant-numeric: tabular-nums; vertical-align: .16em; }
.lg h2 .lg-n::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #F4F2FF, #E8E6FF); box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .16); }
.lg ul { margin-bottom: 1.15em; }
.lg-intro { position: relative; margin: 0 0 2.8em; padding: 22px 24px 22px 70px; border-radius: 22px; border: 1px solid #E4E1FB; background: linear-gradient(180deg, #F6F5FF, #FFFFFF 90%); color: var(--text); }
.lg-intro::before { content: ""; position: absolute; left: 22px; top: 23px; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366F1, #7C3AED); box-shadow: 0 6px 14px -6px rgba(79, 70, 229, .6); }
.lg-intro::after { content: ""; position: absolute; left: 29px; top: 30px; width: 18px; height: 18px; background: #fff; -webkit-mask: var(--lg-ic) center / contain no-repeat; mask: var(--lg-ic) center / contain no-repeat; }
.lg-intro > :last-child { margin-bottom: 0; }
.lg-see { margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--line); font-size: 16px; color: var(--dim); }
.lg-see > :last-child { margin-bottom: 0; }
/* the help box at the end: the app's footer line (or, on the Impressum, our question), then the
footer's two links into the app */
.lg-help { display: flex; align-items: flex-start; gap: 16px; margin: 40px 0 0; padding: 20px 22px 22px; border-radius: 22px; border: 1px solid #E4E1FB; background: radial-gradient(90% 140% at 100% 0%, rgba(139, 92, 246, .1), transparent 62%), linear-gradient(180deg, #FAF9FF, var(--mist)); }
.lg-help-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--violet-600); box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(99, 102, 241, .14); }
.lg-help-ic .ic { width: 20px; height: 20px; }
.lg-help-t { min-width: 0; }
.lg-foot, .lg-ask { margin: 0; padding-top: 9px; font-size: 16px; line-height: 1.55; color: var(--text); }
.lg-help-t > p a { color: var(--violet-600); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(79, 70, 229, .32); text-underline-offset: 3px; }
.lg-help-t > p a:hover { color: var(--ink); text-decoration-color: currentColor; }
.lg-help-go { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.lg-help-go a { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; transition: border-color .2s, color .2s, box-shadow .2s; }
.lg-help-go .ic { width: 15px; height: 15px; color: var(--violet-600); transition: transform .25s var(--ease); }
.lg-help-go a:hover { border-color: #CDD2E2; color: var(--ink); box-shadow: var(--shadow-sm); }
.lg-help-go a:hover .ic { transform: translateX(2px); }
/* the processor table: the region is a column on wide screens, a line under the name on phones */
.lg .lg-table { margin: 1.4em 0 1.3em; }
.lg .lg-table table { font-size: 15px; }
.lg .lg-table td:first-child { font-weight: 600; color: var(--ink); }
.lg .lg-table .lg-block { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--dim); }
.lg .lg-table .lg-wide { color: var(--dim); white-space: nowrap; }
@media (min-width: 640px) { .lg .lg-narrow, .lg .lg-table .lg-narrow { display: none; } }
@media (max-width: 639px) { .lg .lg-wide, .lg .lg-table .lg-wide { display: none; } }
/* the contents: the section number as a small badge in front of each entry, filled for the one you read;
tight enough that a long list fits the screen (and when it does not, content.js keeps the entry in view) */
.lg-toc li a { display: flex; align-items: flex-start; gap: 10px; padding-top: 5px; padding-bottom: 5px; font-size: 13.5px; line-height: 1.38; }
.lg-tn { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 19px; padding: 0 5px; border-radius: 6px; background: var(--mist); font: 600 11px/1 Inter, sans-serif; color: var(--dim); font-variant-numeric: tabular-nums; transition: background-color .25s, color .25s; }
.lg-toc li a:hover .lg-tn { background: var(--violet-50); color: var(--violet-600); }
.lg-toc li a[aria-current="true"] .lg-tn { background: var(--violet-600); color: #fff; }
.lg-toc-m li a::before { content: attr(data-n); }
/* a short document (the Impressum): one card */
.lg-short .art-main { grid-column: 1 / -1; width: 100%; max-width: 880px; margin: 0 auto; }
.lg-short .lg { border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.lg-short .lg > section { margin: 0; padding: 22px 28px; border-top: 1px solid var(--line); }
.lg-short .lg > section:first-child { border-top: 0; }
.lg-short .lg h2 { margin: 0 0 4px; font: 600 14.5px/1.5 Inter, sans-serif; letter-spacing: 0; color: var(--dim); }
.lg-short .lg p { margin: 0; color: var(--ink); }
.lg-short .lg section > :not(h2) + :not(h2) { margin-top: .6em; }
/* the Impressum card: the provider is the card's head, every other section a tile with its icon
(legal.py reads which is which from the app's text: lg-k-provider, lg-k-register, ...) */
.lg-card .lg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-radius: 28px; background: var(--line); box-shadow: var(--shadow-md); }
.lg-card .lg > section { padding: 24px 26px 26px 84px; border: 0; background: #fff; }
.lg-card .lg > section:nth-child(even):last-child { grid-column: 1 / -1; }
.lg-card .lg > section::before { content: ""; position: absolute; left: 26px; top: 22px; width: 40px; height: 40px; border-radius: 12px; background: var(--violet-50); box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .12); }
.lg-card .lg > section::after { content: ""; position: absolute; left: 36px; top: 32px; width: 20px; height: 20px; background: var(--violet-600); -webkit-mask: var(--lg-ic) center / contain no-repeat; mask: var(--lg-ic) center / contain no-repeat; }
.lg-card .lg h2 { margin-bottom: 6px; padding-top: 1px; }
.lg-card .lg p { font-size: 16.5px; line-height: 1.62; text-wrap: pretty; }
.lg-card .lg > .lg-k-provider { grid-column: 1 / -1; isolation: isolate; overflow: hidden; padding: 36px 40px 38px; color: #fff; background: radial-gradient(60% 130% at 100% 0%, rgba(236, 72, 153, .3), transparent 62%), radial-gradient(70% 120% at 0% 100%, rgba(99, 102, 241, .42), transparent 62%), linear-gradient(120deg, #1E1B4B 0%, #312E81 48%, #4C1D95 100%); }
.lg-card .lg > .lg-k-provider::before { left: 0; top: 0; z-index: -1; width: 100%; height: 100%; border-radius: 0; box-shadow: none; background: radial-gradient(rgba(255, 255, 255, .16) 1.1px, transparent 1.3px) 0 0 / 22px 22px; -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 88%); mask-image: linear-gradient(100deg, transparent 38%, #000 88%); }
.lg-card .lg > .lg-k-provider::after { left: auto; right: 44px; top: 50%; z-index: -1; width: 128px; height: 128px; margin-top: -64px; background: rgba(255, 255, 255, .13); }
.lg-card .lg-k-provider h2 { margin-bottom: 12px; color: #C7D2FE; }
.lg-card .lg-k-provider p { color: #E0E7FF; font-size: 17px; line-height: 1.62; }
.lg-card .lg-k-provider p::first-line { font-family: Outfit, Inter, sans-serif; font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; line-height: 1.4; color: #fff; }
.lg-card .lg-k-provider { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E"); }
.lg-card .lg-k-people { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.lg-card .lg-k-register { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18M6 18v-7M10 18v-7M14 18v-7M18 18v-7M12 2l8 5H4z'/%3E%3C/svg%3E"); }
.lg-card .lg-k-contact { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.lg-card .lg-k-vat { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E"); }
.lg-card .lg-k-editor { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.38 3.62a1 1 0 0 1 3 3L7.37 18.64a2 2 0 0 1-.85.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.85z'/%3E%3C/svg%3E"); }
.lg-card .lg-k-dispute { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E"); }
.lg-card .lg-k-note { --lg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.lg-intro { --lg-ic: 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E"); }
@media (max-width: 1199px) {
.t-legal .art-body { padding-top: 36px; }
/* the article grid narrows to the reading measure here; the Impressum card keeps its own width */
.t-legal .lg-short .art-body { grid-template-columns: minmax(0, 880px); }
}
/* the Impressum's tiles take the card's whole width once two would squeeze a long word */
@media (max-width: 899px) {
.lg-card .lg { grid-template-columns: minmax(0, 1fr); }
}
/* phones: the head reads from the left like every content page head (.cp-head at 700 px) */
@media (max-width: 700px) {
.t-legal .cp-head { padding-top: 112px; }
.lg-seal { width: 52px; height: 52px; margin: 0 0 20px 9px; }
.lg-glyph { width: 23px; height: 23px; }
.lg-meta { justify-content: flex-start; margin-left: 0; gap: 8px; }
.lg-meta > * { padding: 0 12px; font-size: 14px; gap: 7px; }
.prose.lg { font-size: 16.5px; line-height: 1.7; }
.lg-long .lg > section { padding-top: 2em; margin-top: 2em; }
.lg-intro { padding: 18px 18px 18px 60px; border-radius: 20px; }
.lg-intro::before { left: 16px; top: 19px; width: 30px; height: 30px; }
.lg-intro::after { left: 22px; top: 25px; }
.lg-help { padding: 16px 16px 18px; gap: 14px; border-radius: 20px; }
.lg .lg-table th, .lg .lg-table td { padding: 11px 12px; font-size: 14px; }
.lg-short .lg > section { padding: 18px 20px; }
.lg-card .lg { border-radius: 24px; }
.lg-card .lg > section { padding: 20px 20px 22px 76px; }
.lg-card .lg > section::before { left: 20px; top: 20px; }
.lg-card .lg > section::after { left: 30px; top: 30px; }
.lg-card .lg > .lg-k-provider { padding: 28px 24px 30px; }
.lg-card .lg > .lg-k-provider::after { right: 18px; top: auto; bottom: 18px; width: 64px; height: 64px; margin-top: 0; }
}
/* when the two pills no longer fit one row: the date becomes a small two line tile beside the
language pill (one row from about 360 px, two below) */
@media (max-width: 520px) {
.lg-meta { align-items: stretch; }
.lg-meta .lg-date { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 7px 14px; border-radius: 14px; font-size: 12.5px; line-height: 1.3; }
.lg-meta .lg-date time { font-size: 14px; }
.lg-meta .lg-alt { border-radius: 14px; }
}
@media (max-width: 460px) {
.lg-help { flex-direction: column; }
.lg-foot, .lg-ask { padding-top: 0; }
/* the intro's icon floats, so the text keeps the card's width below it */
.lg-intro { padding: 18px; }
.lg-intro::before { position: static; float: left; width: 30px; height: 30px; margin: 3px 12px 2px 0; }
.lg-intro::after { left: 24px; top: 24px; }
}
/* narrow phones: a tile's icon sits above its label, so the longest words (Verbraucherschlichtungsstelle)
keep the whole width */
@media (max-width: 400px) {
.lg-card .lg > section { padding: 70px 20px 22px; }
.lg-card .lg p { font-size: 16px; }
}
@media print {
.lg-seal, .lg-meta .lg-alt, .lg-help-go, .lg-help-ic { display: none; }
.lg-short .lg, .lg-card .lg { box-shadow: none; background: none; }
.lg-card .lg > section, .lg-card .lg > .lg-k-provider { background: none; color: inherit; }
.lg-card .lg-k-provider h2, .lg-card .lg-k-provider p, .lg-card .lg-k-provider p::first-line { color: #000; }
.lg-card .lg > section::before, .lg-card .lg > section::after { display: none; }
.lg-card .lg > section { padding-left: 0; }
}
/* Motion: the frame arrives, the words stay. A section below the first screen draws its rule from the
left and its number badge (on the Impressum: its icon) fills in as it arrives; content.js marks it. */
html.cm .lg-long .lg > section.lg-rv::before { transform: scaleX(0); }
html.cm .lg-long .lg > section.lg-rv.lg-on::before { transform: none; transition: transform 1.2s var(--cm-ease) var(--cm-d, 0s); }
html.cm .lg > section.lg-rv h2 .lg-n::before { opacity: 0; transform: scale(.4); }
html.cm .lg > section.lg-rv.lg-on h2 .lg-n::before { opacity: 1; transform: none; transition: opacity .5s ease calc(var(--cm-d, 0s) + .2s), transform .9s var(--cm-ease) calc(var(--cm-d, 0s) + .2s); }
html.cm .lg-card .lg > section.lg-rv::before, html.cm .lg-card .lg > section.lg-rv::after { opacity: 0; transform: scale(.5); }
html.cm .lg-card .lg > section.lg-rv.lg-on::before, html.cm .lg-card .lg > section.lg-rv.lg-on::after { opacity: 1; transform: none; transition: opacity .5s ease var(--cm-d, 0s), transform .9s var(--cm-ease) var(--cm-d, 0s); }
@media print { html.cm .lg > section.lg-rv::before, html.cm .lg > section.lg-rv::after, html.cm .lg > section.lg-rv h2 .lg-n::before { opacity: 1; transform: none; } }
/* ---------------------------------------------------------- end legal pages */
/* ==========================================================================
>>> Memberships (Leon 2026-09-28: "Preise" became "Memberships"; site/build/memberships.py). The two
comparison pages (t-memberships: /memberships/athleten/, /memberships/coaches/) and the base of the
membership pages (t-membership, one per plan; their showpieces are builder 2's "Membership pages"
block below). main carries ms-ath (warm: sunset) or ms-coa (cool: blue hour) and ms-p-PLAN. The
first screen is a stage (ms-st-*): daylight for Free, dusk for Premium, blue hour for Pro, the night
for Elite; every stage has an opaque background colour, which the bar reads (site.js toneUnderBar).
The card itself is site.css "membership card". Only transform and opacity move; content.js
("Memberships") runs the billing switch, the flip, the lit figures and the bars.
========================================================================== */
.ms-ath { --ms-acc: #B8325F; --ms-ink: #3A1830; --ms-acc-d: #FFD9C6; --ms-mist: #FFF6F1; --ms-mist2: #FFEDE6; --ms-line: rgba(58, 24, 48, .1);
--ms-tint: rgba(184, 50, 95, .08); --ms-grad: var(--a-grad-light); --ms-grad-d: var(--a-grad-dark); --ms-dot: var(--a-arrow); --ms-hl: rgba(214, 58, 103, .06);
--ms-shadow: rgba(142, 31, 82, .22); }
.ms-coa { --ms-acc: #4447D8; --ms-ink: #141645; --ms-acc-d: #C7D2FE; --ms-mist: #F3F5FF; --ms-mist2: #E9EDFF; --ms-line: rgba(20, 22, 69, .1);
--ms-tint: rgba(68, 71, 216, .08); --ms-grad: var(--c-grad-light); --ms-grad-d: var(--c-grad-dark); --ms-dot: var(--c-arrow); --ms-hl: rgba(68, 70, 218, .06);
--ms-shadow: rgba(52, 52, 184, .22); }
.t-memberships, .t-membership { background: #fff; }
.t-memberships .grad, .t-membership .grad { background-image: var(--ms-grad); }
.t-memberships .kicker, .t-membership .kicker { color: var(--ms-acc); }
.t-memberships :focus-visible, .t-membership :focus-visible { outline-color: var(--ms-acc); }
/* ---- the stages of the first screens (and the bands at the end) */
.ms-st-dusk { background-color: #1E0819; background-image: radial-gradient(70% 55% at 72% 108%, rgba(255, 150, 110, .55), rgba(255, 150, 110, 0) 70%),
radial-gradient(52% 50% at 8% -8%, rgba(120, 40, 110, .55), rgba(120, 40, 110, 0) 70%), linear-gradient(180deg, #1E0819 0%, #3E0F33 46%, #7A2148 100%); }
.ms-st-blue { background-color: #0E1050; background-image: radial-gradient(48% 50% at 96% -6%, rgba(127, 214, 255, .45), rgba(127, 214, 255, 0) 70%),
radial-gradient(60% 60% at 0% 110%, rgba(22, 23, 94, .9), rgba(22, 23, 94, 0) 70%), linear-gradient(170deg, #0E1050 0%, #1E2090 55%, #2B2DA6 100%); }
.ms-st-night { background-color: #0A0828; background-image: radial-gradient(64% 36% at 62% -8%, rgba(127, 214, 255, .3), rgba(127, 214, 255, 0) 70%),
radial-gradient(46% 34% at 16% 0%, rgba(160, 124, 255, .36), rgba(160, 124, 255, 0) 70%), radial-gradient(36% 28% at 96% 26%, rgba(110, 240, 220, .12), rgba(110, 240, 220, 0) 70%),
linear-gradient(180deg, #0A0828 0%, #120E48 55%, #1B1764 100%); }
.ms-st-bluenight { background-color: #070A26; background-image: radial-gradient(46% 44% at 94% -4%, rgba(127, 214, 255, .4), rgba(127, 214, 255, 0) 70%),
radial-gradient(50% 40% at 10% 0%, rgba(108, 116, 255, .35), rgba(108, 116, 255, 0) 70%), linear-gradient(180deg, #2B2DA6 0%, #16175E 48%, #070A26 100%); }
.ms-st-day-a { background-color: #FFF6F1; background-image: radial-gradient(46% 50% at 6% 0%, rgba(255, 200, 214, .7), rgba(255, 200, 214, 0) 70%),
radial-gradient(50% 55% at 98% 100%, rgba(255, 176, 128, .5), rgba(255, 176, 128, 0) 70%); }
.ms-st-day-c { background-color: #F3F5FF; background-image: radial-gradient(46% 50% at 6% 0%, rgba(183, 190, 255, .75), rgba(183, 190, 255, 0) 70%),
radial-gradient(50% 55% at 98% 100%, rgba(127, 214, 255, .45), rgba(127, 214, 255, 0) 70%); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) { color: #fff; --ms-on: rgba(255, 255, 255, .82); --ms-quiet: rgba(255, 255, 255, .64); }
:is(.ms-st-day-a, .ms-st-day-c) { color: var(--ms-ink); --ms-on: color-mix(in srgb, var(--ms-ink) 78%, transparent); --ms-quiet: color-mix(in srgb, var(--ms-ink) 62%, transparent); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .grad { background-image: var(--ms-grad-d); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .kicker { color: var(--ms-acc-d); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) :focus-visible { outline-color: #fff; }
/* ---- the first screen */
.ms-hero { position: relative; isolation: isolate; overflow: hidden; padding: 132px 0 104px; }
.ms-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mc-grain); background-size: 160px; opacity: .06; mix-blend-mode: overlay; }
.ms-hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 56px 64px; align-items: center; }
/* the comparison pages: a copy column wide enough for the button pair on one line (560 px, the ms-copy query) and a
fan wide enough that its cards keep the wordmark (240 px each, 5 of its 11 columns): both hold from 1440 px */
.ms-cmp .ms-hero-in { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); column-gap: 48px; }
.ms-kick { font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.ms-h1 { margin-top: 16px; font-size: clamp(42px, 5.4vw, 74px); line-height: 1.02; letter-spacing: -.04em; color: inherit; text-wrap: balance; }
.ms-h1 .grad { display: block; width: fit-content; max-width: 100%; }
.ms-cmp .ms-h1 { font-size: clamp(40px, 4.6vw, 64px); }
.ms-p-elite .ms-h1 { font-size: clamp(38px, 4.4vw, 62px); }
.ms-next .ms-delta { margin-top: 4px; }
.ms-lede { margin-top: 20px; max-width: 540px; font-size: clamp(17px, 1.4vw, 19.5px); line-height: 1.55; color: var(--ms-on); text-wrap: pretty; }
/* the three facts: one row where the column holds all three, else one under the other (never two and an orphan) */
.ms-hero-copy { container: ms-copy / inline-size; }
.ms-hero .pr-facts { flex-direction: column; align-items: flex-start; gap: 9px; justify-content: flex-start; margin: 26px 0 0; color: var(--ms-on); }
@container ms-copy (min-width: 600px) { .ms-hero .pr-facts { flex-direction: row; gap: 8px 22px; } }
.ms-hero .pr-facts .ic { color: var(--ms-acc-d); }
:is(.ms-st-day-a, .ms-st-day-c) .pr-facts .ic { color: var(--ms-acc); }
.ms-hero-price { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin-top: 28px; }
.ms-hero-price .pr-price { flex-basis: 100%; order: 2; }
.ms-hero .ms-launch { margin-top: 6px; }
.ms-hero .ms-launch-l1 { text-wrap: balance; }
.ms-hero .pr-y .for { font-size: 14.5px; }
.ms-hero .ms-cta { margin-top: 28px; }
/* a column too narrow for the pair side by side stacks it as one block of equal widths, primary first */
@container ms-copy (max-width: 559px) { .ms-hero .ms-cta { flex-direction: column; align-items: stretch; max-width: 420px; } }
/* the tier switch: back to the comparison, then every membership of the audience as a pill */
/* ---- the plan marks (swatch size: the switch pills, the tiles, the comparison head): a small rounded
card in the plan's material with one emblem (site/build/memberships.py MARKS); a rim keeps it on white and on the night */
.mt { position: relative; display: block; aspect-ratio: 1.4; border-radius: 24% / 34%; overflow: hidden;
background: var(--mt-bg); box-shadow: inset 0 0 0 1px var(--mt-rim), inset 0 1px 0 rgba(255, 255, 255, var(--mt-top, .4)), 0 1px 2px rgba(10, 8, 40, .18); }
.mt svg { overflow: visible; position: absolute; inset: 0; width: 100%; height: 100%; }
.mt .mt-em { fill: var(--mt-em, #fff); stroke: none; }
.mt .mt-ring { fill: none; stroke: var(--mt-em); stroke-width: 1.9; }
.mt .mt-gem { fill: var(--mt-gem, #7FD6FF); stroke: none; }
.mt-athlete-free { --mt-bg: linear-gradient(150deg, #fff 0%, var(--a-mist) 45%, var(--a-blush) 100%); --mt-rim: rgba(184, 50, 95, .3); --mt-em: var(--a-accent); }
.mt-athlete-premium { --mt-bg: radial-gradient(90% 90% at 80% 10%, rgba(255, 196, 142, .9), rgba(255, 196, 142, 0) 60%), linear-gradient(150deg, var(--a-apricot) 0%, var(--a-coral) 40%, var(--a-rose) 70%, var(--a-berry) 100%);
--mt-rim: rgba(255, 225, 214, .5); --mt-em: #FFF6EE; }
.mt-coach-free { --mt-bg: linear-gradient(150deg, #fff 0%, var(--c-mist) 45%, #DCE0FF 100%); --mt-rim: rgba(68, 71, 216, .3); --mt-em: var(--c-accent); }
.mt-coach-pro { --mt-bg: radial-gradient(90% 90% at 80% 10%, rgba(127, 214, 255, .55), rgba(127, 214, 255, 0) 60%), linear-gradient(150deg, var(--c-peri) 0%, var(--c-violet) 45%, var(--c-indigo) 100%);
--mt-rim: rgba(199, 204, 255, .5); --mt-em: #fff; }
.mt-coach-elite { --mt-bg: radial-gradient(80% 70% at 85% 0%, rgba(127, 214, 255, .35), rgba(127, 214, 255, 0) 65%), radial-gradient(80% 80% at 0% 100%, rgba(91, 93, 241, .55), rgba(91, 93, 241, 0) 70%), linear-gradient(150deg, var(--c-deep) 0%, var(--c-night) 100%);
--mt-rim: rgba(199, 204, 255, .45); --mt-top: .3; --mt-em: #E4E7FF; --mt-gem: #7FD6FF; }
.ms-switch { display: flex; align-items: center; gap: 12px 16px; margin: 0 0 44px; min-width: 0; }
.ms-switch ul { display: flex; gap: 6px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.ms-sw-all { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font: 600 14px Inter, sans-serif; color: var(--ms-on); white-space: nowrap; }
.ms-sw-all svg, .ms-switch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ms-sw { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 8px; border-radius: 999px; font: 600 14px Inter, sans-serif; color: var(--ms-on); white-space: nowrap; transition: background-color .25s, color .25s; }
.ms-sw .mcw { width: 22px; }
/* at pill size the emblem grows a little, so the crown and the bars still read at 22 px */
.ms-switch .mt svg { width: 100%; height: 100%; stroke: none; transform: scale(1.12); }
.ms-sw .mt .mt-ring { stroke-width: 2.1; }
.ms-sw.is-on { background: #fff; color: var(--ms-ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
@media (hover: hover) { .ms-sw:not(.is-on):hover { background: rgba(255, 255, 255, .12); color: #fff; } }
:is(.ms-st-day-a, .ms-st-day-c) .ms-switch ul { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--ms-line); }
:is(.ms-st-day-a, .ms-st-day-c) .ms-sw.is-on { background: var(--ms-ink); color: #fff; }
@media (hover: hover) { :is(.ms-st-day-a, .ms-st-day-c) .ms-sw:not(.is-on):hover { background: #fff; color: var(--ms-ink); } }
/* the card, with its glow, and the button that turns it */
.ms-hero-card { position: relative; display: grid; justify-items: center; }
.ms-hero-card::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, var(--ms-glow, rgba(255, 150, 110, .32)), transparent); filter: blur(10px); }
.ms-coa .ms-hero-card::before { --ms-glow: rgba(127, 214, 255, .22); }
.ms-p-free .ms-hero-card::before { --ms-glow: rgba(255, 255, 255, .7); }
.ms-flip { position: relative; width: min(560px, 100%); perspective: 1600px; }
.ms-flip-in { position: relative; display: grid; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.ms-face { grid-area: 1 / 1; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ms-face.is-back { transform: rotateY(180deg); }
.ms-flip.is-flipped .ms-flip-in { transform: rotateY(180deg); }
.ms-hero-card .mc { --rx0: 7deg; --ry0: -13deg; }
.ms-hero-card .mc-back { --rx0: 7deg; --ry0: 13deg; }
.ms-turn { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 40px; margin: 26px 10px 0 auto; padding: 0 16px; border-radius: 999px; font: 600 14px Inter, sans-serif;
color: var(--ms-on); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: background-color .25s; }
.ms-turn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.ms-turn[aria-pressed="true"] svg { transform: rotate(-180deg); }
@media (hover: hover) { .ms-turn:hover { background: rgba(255, 255, 255, .16); } }
:is(.ms-st-day-a, .ms-st-day-c) .ms-turn { background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--ms-line); color: var(--ms-ink); }
.ms-fig-lit { color: var(--ms-acc-d); }
.mc-fig.is-lit > span, .mc-fig.is-lit b { opacity: 1; }
.mc-fig.is-lit b { color: #FFD3BF; text-shadow: 0 0 1.6cqw rgba(255, 170, 120, .6); }
.ms-coa .mc-fig.is-lit b { color: #B5ECFF; text-shadow: 0 0 1.6cqw rgba(127, 214, 255, .6); }
:is(.m-athlete-free, .m-coach-free) .mc-fig.is-lit b { color: var(--ms-acc); text-shadow: none; }
@media (prefers-reduced-motion: no-preference) {
.ms-hero .mcw-hero .mc { animation: mc-settle 1.2s cubic-bezier(.22, 1, .36, 1) .1s backwards; }
}
@keyframes mc-settle { from { opacity: 0; transform: rotateX(calc(var(--rx0) + 12deg)) rotateY(calc(var(--ry0) - 12deg)) scale(1.04); } }
/* the comparison pages: the cards fanned like a hand, each a link to its page */
.ms-fan { position: relative; display: flex; justify-content: center; align-items: flex-start; padding: 8px 0 24px; }
.ms-fan-c { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 18px; width: min(380px, 62%); border-radius: 18px;
transform: translateY(var(--dy, 0px)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.ms-fan-c .mc { --rz0: var(--r); }
.ms-fan-c:first-child { justify-items: start; }
.ms-fan-c:last-child { justify-items: end; }
.ms-fan-n2 .ms-fan-c + .ms-fan-c { margin-left: -24%; }
.ms-fan-n2 .ms-fan-c:nth-child(1) { --dy: -10px; z-index: 1; }
.ms-fan-n2 .ms-fan-c:nth-child(2) { --dy: 46px; z-index: 2; }
/* three cards like a hand: Pro upright in front, Free and Elite lower at its sides, so the seats (3, 15,
the infinity) and every name read below Pro's edge; the three links sit in one row under the hand. The
cards overlap in a grid (card C columns, step S); only the card and its link text take the pointer */
.ms-fan-n3 { --fc: 5; --fs: 3; display: grid; grid-template-columns: repeat(calc(var(--fc) + 2 * var(--fs)), minmax(0, 1fr)); align-items: start; padding: 8px 0 12px; }
.ms-fan-n3 .ms-fan-c { grid-row: 1; width: auto; gap: 0; justify-items: center; transform: none; container-type: inline-size; pointer-events: none; }
.ms-fan-n3 .ms-fan-c > * { pointer-events: auto; }
.ms-fan-n3 .ms-fan-c:nth-child(1) { grid-column: 1 / span var(--fc); z-index: 1; }
.ms-fan-n3 .ms-fan-c:nth-child(2) { grid-column: calc(1 + var(--fs)) / span var(--fc); z-index: 3; }
.ms-fan-n3 .ms-fan-c:nth-child(3) { grid-column: calc(1 + 2 * var(--fs)) / span var(--fc); z-index: 2; }
.ms-fan-n3 .ms-fan-c .mcw { transform: translateY(var(--drop, 0%)); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.ms-fan-n3 .ms-fan-c:nth-child(odd) .mcw { --drop: 44%; }
.ms-fan-n3 .ms-fan-l { margin-top: calc(32cqw + 16px); }
/* a narrow hand keeps only the names under the cards ("Alles über" stays in each link's name) */
.ms-fan-n3 { container: ms-fan / inline-size; }
@container ms-fan (max-width: 560px) {
.ms-fan-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-fan-n3 .ms-fan-l { margin-top: calc(32cqw + 12px); padding: 6px 12px; }
}
.ms-fan-l { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font: 600 13.5px Inter, sans-serif; color: #fff;
background: rgba(20, 8, 30, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); white-space: nowrap; }
.ms-fan-l svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) {
.ms-fan-c:hover { z-index: 5; transform: translateY(calc(var(--dy, 0px) - 18px)); }
.ms-fan-c:hover .mc { --rz0: 0deg; }
.ms-fan-c:hover .ms-fan-l svg { transform: translateX(3px); }
.ms-fan-n3 .ms-fan-c:hover { transform: none; }
.ms-fan-n3 .ms-fan-c:hover .mcw { transform: translateY(calc(var(--drop, 0%) - 9%)); }
}
.ms-fan-c:focus-visible { z-index: 5; outline: 2px solid #fff; outline-offset: 6px; }
.ms-fan-n3 .ms-fan-c:focus-visible { outline: 0; }
.ms-fan-n3 .ms-fan-c:focus-visible .ms-fan-l { outline: 2px solid #fff; outline-offset: 3px; }
.ms-fan-n3 .ms-fan-c:focus-visible .mcw { transform: translateY(calc(var(--drop, 0%) - 9%)); }
.ms-fan-n3 .ms-fan-c:focus-visible .mc { --rz0: 0deg; }
/* ---- the sections */
.ms-sec { padding: 80px 0; }
.ms-mid { max-width: 1040px; }
.ms-sec-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.ms-sec-head.is-left { margin-left: 0; text-align: left; }
.ms-sec-head h2 { margin-top: 12px; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -.03em; color: var(--ms-ink); text-wrap: balance; }
.ms-sec-head > p:last-child:not(.kicker) { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
.ms-h2s { font-size: 13px; font-family: Inter, sans-serif; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-acc); }
.ms-h2b { margin-top: 72px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.02em; color: var(--ms-ink); text-wrap: balance; }
.ms-p { margin-top: 12px; max-width: 720px; font-size: 16.5px; line-height: 1.65; color: var(--dim); text-wrap: pretty; }
/* a one line remark under a block (it was .ms-note, a name the day band of "Ein Tag mit Free" uses for its notes) */
.ms-remark { margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--ms-ink); }
.ms-fees .ms-remark { max-width: 640px; margin: 28px auto 0; text-align: center; text-wrap: balance; }
.ms-help-l { margin-top: 22px; }
.ms-help-l a, .ms-help a { color: var(--ms-acc); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* ---- the plans of the comparison pages: the controls, then one tile per membership */
.ms-plans { position: relative; padding-top: 56px; background: linear-gradient(180deg, var(--ms-mist) 0%, #fff 78%); }
.ms-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; }
.ms-aud { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 10px 30px -22px var(--ms-shadow); }
.ms-aud-l { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 22px; border-radius: 999px; font: 600 15px Inter, sans-serif; color: var(--dim); transition: background-color .25s, color .25s; }
.ms-aud-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--a-arrow); }
.ms-aud-l.is-c .ms-aud-dot { background: var(--c-arrow); }
.ms-aud-l[aria-current="page"] { background: var(--ms-ink); color: #fff; }
@media (hover: hover) { .ms-aud-l:not([aria-current]):hover { color: var(--ms-ink); background: var(--ms-mist); } }
.ms-bill { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px; min-inline-size: 0; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-bill::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ms-ink); transition: transform .55s var(--ease); }
.ms-bill input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ms-bill label { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 999px; font: 600 14px/1 Inter, sans-serif; color: var(--dim); white-space: nowrap; cursor: pointer; transition: color .3s; }
.ms-bill input:checked + label { color: #fff; }
.ms-bill input:focus-visible + label { outline: 3px solid var(--ms-acc); outline-offset: 3px; }
.ms-bill:has(input[value="year"]:checked)::before, main[data-bill="year"] .ms-bill::before { transform: translateX(100%); }
@media (max-width: 420px) {
.ms-bill { grid-template-columns: auto minmax(0, 1fr); }
.ms-bill::before { display: none; }
.ms-bill label { padding: 0 12px; gap: 6px; transition: color .3s, background-color .3s; }
.ms-bill input:checked + label { background: var(--ms-ink); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill input:checked + label { background: #fff; }
}
.ms-save { padding: 4px 7px; border-radius: 999px; background: var(--ms-tint); color: var(--ms-acc); font: 600 11.5px/1 Inter, sans-serif; }
.ms-bill input:checked + label .ms-save { background: rgba(255, 255, 255, .18); color: #fff; }
/* on a dark first screen the switch is glass */
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill::before { background: #fff; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill label { color: var(--ms-on); min-height: 34px; font-size: 13.5px; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill input:checked + label { color: var(--ms-ink); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-save { background: rgba(255, 255, 255, .14); color: #fff; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-bill input:checked + label .ms-save { background: var(--ms-tint); color: var(--ms-acc); }
.ms-tiles { display: grid; gap: 22px; margin: 40px auto 0; align-items: stretch; }
.ms-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
.ms-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-tile { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 28px 24px; border-radius: 28px; background: #fff;
box-shadow: inset 0 0 0 1px var(--ms-line), 0 30px 70px -44px var(--ms-shadow); scroll-margin-top: 96px; }
.ms-tile.is-hl { background: linear-gradient(180deg, var(--ms-mist2), #fff 46%) padding-box, var(--ms-rim) border-box; border: 1.5px solid transparent;
box-shadow: 0 40px 90px -46px var(--ms-shadow), 0 2px 8px rgba(15, 23, 42, .04); }
.ms-ath .ms-tile.is-hl { --ms-rim: linear-gradient(130deg, #FFD3BF, #FFFFFF 38%, #FFC7D6 62%, #FF9E74); }
.ms-coa .ms-tile.is-hl { --ms-rim: linear-gradient(130deg, #BFC7FF, #FFFFFF 38%, #B5ECFF 62%, #6C74FF); transform: translateY(-10px); }
.ms-tile-top { display: flex; align-items: center; gap: 12px; }
.ms-tile-top .mcw { width: 40px; }
.ms-tile-n { font-size: 26px; letter-spacing: -.025em; color: var(--ms-ink); }
.ms-tile-top .ms-pill { margin-left: auto; }
.ms-tile-for { margin-top: 10px; font-size: 15px; color: var(--dim); }
.ms-tile .pr-price { margin-top: 16px; }
.ms-tile-key { margin-top: 12px; font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--ms-ink); }
.ms-tile .ms-launch { margin-top: 12px; }
.ms-tile .ms-check { margin: 20px 0 24px; }
.ms-tile .ms-cta { margin-top: auto; }
.ms-tile .ms-cta .ms-btn { width: 100%; }
.ms-tile-go { margin-top: 14px; text-align: center; }
.ms-tile-go a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 15px Inter, sans-serif; color: var(--ms-acc); }
.ms-tile-go .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); }
@media (hover: hover) { .ms-tile-go a:hover .ic { transform: translateX(3px); } }
.ms-pin-free { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 28px; font-size: 15px; color: var(--dim); }
.ms-pin-free .ic { color: var(--ms-acc); }
/* the price: monthly and yearly share one cell, the billing switch picks one (no JavaScript needed) */
.pr-price { display: grid; font-variant-numeric: tabular-nums; }
.pr-price > div { grid-area: 1 / 1; min-width: 0; transition: opacity .45s var(--cm-ease), transform .7s var(--cm-ease), filter .45s var(--cm-ease), visibility 0s linear 0s; }
.pr-price .pr-y { opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0); filter: blur(6px); transition-delay: 0s, 0s, 0s, .45s; }
main:has(.ms-bill input[value="year"]:checked) .pr-m:not(.pr-y-too), main[data-bill="year"] .pr-m:not(.pr-y-too) { opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0); filter: blur(6px); transition-delay: 0s, 0s, 0s, .45s; }
main:has(.ms-bill input[value="year"]:checked) .pr-y, main[data-bill="year"] .pr-y { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: .08s, .08s, .08s, 0s; }
.pr-price .price { color: var(--ms-ink); white-space: nowrap; }
.pr-price .price b { font: 600 44px/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; }
.pr-price .price small { margin-left: 4px; font: 400 15px Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 72%, transparent); }
.pr-price .for { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--dim); text-wrap: pretty; }
.pr-saved { font-weight: 600; color: var(--ms-acc); }
.pr-price.is-hero .price b { font-size: 44px; }
.pr-price.is-hero .pr-m, .pr-price.is-hero .pr-y { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.pr-price.is-hero .for { margin: 0; font-size: 16px; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .pr-price .price, :is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .pr-price .price small { color: #fff; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .pr-price .price small, :is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .pr-price .for { color: var(--ms-on); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .pr-saved { color: var(--ms-acc-d); }
.pr-facts { list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 14.5px; }
.pr-facts li { display: inline-flex; align-items: center; gap: 8px; }
.pr-facts .ic { width: 16px; height: 16px; color: var(--ms-acc); }
/* the launch lines under a price */
.ms-launch { display: grid; justify-items: start; gap: 5px; }
.ms-launch .ms-pill { margin-bottom: 4px; }
.ms-launch-l1 { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ms-ink); text-wrap: pretty; }
.ms-launch-l2 { font-size: 13px; line-height: 1.45; color: var(--dim); text-wrap: pretty; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-launch-l1 { color: var(--ms-acc-d); }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-launch-l2 { color: var(--ms-quiet); }
/* lists with a check or a cross in the audience's colour */
.ms-check, .ms-x { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--text); }
.ms-check li, .ms-x li { position: relative; padding-left: 29px; text-wrap: pretty; }
.ms-check li::before, .ms-x li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; background: var(--ms-acc);
-webkit-mask: var(--ms-mark) center / contain no-repeat; mask: var(--ms-mark) center / contain no-repeat; }
.ms-check { --ms-mark: url("data:image/svg+xml;utf8,"); }
.ms-x { --ms-mark: url("data:image/svg+xml;utf8,"); }
.ms-x li::before { background: var(--dim); }
/* ---- the comparison: the app's whole matrix; the head (plan and swatch) sticks under the bar */
.pr-mx { max-width: 1040px; margin: 0 auto; }
.pr-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15.5px; }
.pr-table thead th, .pr-table thead td { position: sticky; top: 68px; z-index: 2; padding: 16px 10px 12px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
border-bottom: 1px solid var(--ms-line); vertical-align: bottom; text-align: center; }
.pr-n2 .pr-corner { width: 46%; }
.pr-n3 .pr-corner { width: 37%; }
.pr-hlink { display: inline-grid; justify-items: center; gap: 8px; color: var(--ms-ink); border-radius: 12px; }
.pr-hlink .mcw { width: 40px; transition: transform .35s var(--ease); }
@media (hover: hover) { .pr-hlink:hover .mcw { transform: translateY(-2px) rotate(-3deg); } }
.pr-hn { display: block; font: 600 20px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.015em; }
.pr-gh th { padding: 40px 0 12px; text-align: left; font: 600 12.5px/1.2 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); border-bottom: 1px solid var(--ms-line); }
.pr-table tbody:first-of-type .pr-gh th { padding-top: 26px; }
.pr-table tbody th[scope="row"] { padding: 15px 20px 15px 0; text-align: left; font-weight: 500; color: var(--ms-ink); border-bottom: 1px solid var(--ms-line); vertical-align: middle; }
.pr-rl { display: inline; line-height: 1.4; }
.pr-rh { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; font-weight: 400; color: var(--dim); }
.pr-more { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 600 12px/1.4 Inter, sans-serif; color: var(--ms-acc); background: var(--ms-tint); vertical-align: 1px; white-space: nowrap; transition: background-color .2s; }
@media (hover: hover) { .pr-more:hover { background: color-mix(in srgb, var(--ms-acc) 16%, transparent); } }
.pr-table td { padding: 15px 10px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--ms-line); }
/* the highlighted plan (Premium, Pro): its column tinted with its material, a foil hairline on top */
.pr-table .is-hl { background: var(--ms-hl); }
.pr-table thead .is-hl { background: color-mix(in srgb, var(--ms-mist) 94%, transparent); box-shadow: inset 0 2px 0 var(--ms-foil, #FFC7D6); }
.ms-coa .pr-table thead .is-hl { --ms-foil: #9FB0FF; }
/* the corner above the row names is solid: the rows scrolling under the sticky head never show through it */
.pr-table thead .pr-corner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pr-yes { width: 20px; height: 20px; color: var(--ms-acc); vertical-align: middle; }
.pr-no { display: inline-block; width: 14px; height: 2px; border-radius: 2px; background: #C6CCDA; vertical-align: middle; }
.pr-v { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--ms-ink); font-variant-numeric: tabular-nums; text-wrap: balance; }
@media (hover: hover) {
.pr-table tbody tr:not(.pr-gh) > * { transition: background-color .25s; }
.pr-table tbody tr:not(.pr-gh):hover > * { background-color: color-mix(in srgb, var(--ms-mist) 70%, #fff); }
}
/* ---- the launch price, explained: a timeline of two stops, what keeps the price and what does not */
.ms-lp { background: linear-gradient(180deg, #fff, var(--ms-mist) 60%, #fff); }
.ms-time { list-style: none; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; padding: 0; }
.ms-time::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: linear-gradient(90deg, var(--ms-acc), color-mix(in srgb, var(--ms-acc) 25%, transparent)); }
.ms-time li { position: relative; padding: 50px 24px 22px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 24px 60px -44px var(--ms-shadow); }
.ms-time li::before { content: ""; position: absolute; left: 14px; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 5px var(--ms-acc); }
.ms-time li.is-now::before { background: var(--ms-acc); box-shadow: 0 0 0 5px var(--ms-tint); }
.ms-time-k { font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-acc); }
.ms-time-v { margin-top: 10px; font-size: 16px; color: var(--dim); }
.ms-time-v b { font: 600 28px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; color: var(--ms-ink); white-space: nowrap; }
.ms-time-t { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ms-ink); }
.ms-stays { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.ms-stay { padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-stay h3 { margin-bottom: 14px; font-size: 19px; color: var(--ms-ink); }
.ms-stay .ms-check, .ms-stay .ms-x { font-size: 15px; }
/* ---- the fees (coaches): three cards, the bars of 60 €, the course ladder, from when a plan pays for itself */
.ms-fees { background: linear-gradient(180deg, #fff, var(--ms-mist) 30%, var(--ms-mist) 70%, #fff); }
.ms-fee-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-fee-c { padding: 22px 22px 20px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 24px 60px -46px var(--ms-shadow); }
.ms-fee-k { font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-acc); }
.ms-fee-v { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 10px; font-size: 14px; color: var(--dim); }
.ms-fee-v b { font: 600 26px/1.1 Outfit, Inter, sans-serif; letter-spacing: -.02em; color: var(--ms-ink); white-space: nowrap; }
.ms-fee-c > p:last-child { font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.ms-bars { display: grid; gap: 16px; margin-top: 22px; padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-bars-k { font-size: 14px; color: var(--dim); }
.ms-bar-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14.5px; color: var(--dim); }
.ms-bar-h > b { font: 600 18px Outfit, Inter, sans-serif; color: var(--ms-ink); }
.ms-bar-h span b { font: 600 18px Outfit, Inter, sans-serif; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ms-bar-track { display: flex; height: 34px; margin-top: 8px; border-radius: 12px; overflow: hidden; background: var(--ms-mist); transform-origin: 0 50%; }
.ms-bar-track > span { flex: var(--v) 1 0; min-width: 2px; }
.ms-bar-keep { background: linear-gradient(90deg, #4447D8, #6C74FF 70%, #7FD6FF); }
.ms-bar-fee { background: repeating-linear-gradient(135deg, #16175E 0 6px, #2B2DA6 6px 12px); }
.ms-bar-card { background: #C7CCFF; }
.ms-bar-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px; font-size: 13px; color: var(--dim); }
.ms-bar-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.ms-bar-legend .is-fee::before { background: #2B2DA6; }
.ms-bar-legend .is-card::before { background: #C7CCFF; }
/* the bars grow into place once they come into view (content.js arms them; without it, or with reduced
motion, they simply stand at their length) */
.ms-bars.is-armed .ms-bar-track { transform: scaleX(0); transition: transform 1.1s var(--cm-ease); }
.ms-bars.is-armed .ms-bar:nth-of-type(2) .ms-bar-track { transition-delay: .12s; }
.ms-bars.is-armed .ms-bar:nth-of-type(3) .ms-bar-track { transition-delay: .24s; }
.ms-bars.is-armed.is-in .ms-bar-track { transform: none; }
.ms-fees .cp-table { margin: 18px 0 0; }
.ms-fees .cp-table table { font-size: 15.5px; }
.pr-ex td small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 500; color: var(--faint); }
.pr-ex b { font-weight: 600; color: var(--ms-ink); }
.pr-ex tfoot th, .pr-ex tfoot td, .pr-ex tfoot b { color: var(--ms-acc); }
/* a phone: the 60 EUR example as one small card per plan (the plan, then its three values with their
labels), the course ladder with a wrapping head; neither scrolls sideways */
@media (max-width: 480px) {
.pr-ex table { display: flex; flex-direction: column; }
.pr-ex thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pr-ex tbody, .pr-ex tfoot { display: block; }
.pr-ex caption { order: 3; display: block; }
.pr-ex tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.pr-ex tfoot tr { border-bottom: 0; background: #F8F7FF; }
.pr-ex tr > th, .pr-ex tr > td, .pr-ex tfoot th, .pr-ex tfoot td { border: 0; background: none; }
.pr-ex tr > th { grid-column: 1 / -1; padding: 13px 16px 0; }
.pr-ex tr > td.num { padding: 6px 4px 13px 16px; text-align: left; white-space: nowrap; }
.pr-ex tr > td.num + td { padding-left: 4px; }
.pr-ex td small { margin-top: 2px; }
.pr-ex td::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 500 11px/1.3 Inter, sans-serif; color: var(--faint); }
.pr-lad thead th { white-space: normal; }
.pr-lad th, .pr-lad td { padding: 11px 8px; font-size: 14px; }
.pr-lad tbody th { white-space: nowrap; }
.pr-lad tr > :first-child { padding-left: 14px; }
.pr-lad tr > :last-child { padding-right: 14px; }
}
.ms-bes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.ms-be { padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 24px 60px -46px var(--ms-shadow); }
.ms-be-v { margin-top: 10px; font-size: 15px; color: var(--dim); }
.ms-be-v b { display: block; font: 600 36px/1.05 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ms-be-t { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }
.t-memberships .cp-go, .t-membership .cp-go { margin-top: 18px; }
.t-memberships .cp-go a, .t-membership .cp-go a { color: var(--ms-acc); }
/* ---- the questions */
.ms-faq .cp-faq { margin-top: 0; }
.ms-faq .cp-faq summary::after, .ms-faq .cp-faq summary .ic { color: var(--ms-acc); }
/* ---- the band at the end: the plan's material, the card, the headline, the buttons (and the doors) */
.ms-band { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; color: #fff; }
.ms-band h2 { margin-top: 12px; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.ms-band h2 .grad { display: inline-block; }
.ms-band-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 40px 64px; align-items: center; }
.ms-band-card { display: grid; justify-items: center; }
.ms-band-card .mcw { max-width: 400px; }
.ms-band-card .mc { --rx0: 6deg; --ry0: 12deg; --rz0: -3deg; }
.ms-band-t > p:not(.kicker) { margin-top: 16px; max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--ms-on); }
.ms-band .ms-cta { margin-top: 28px; }
.ms-doors { margin-top: 64px; }
.ms-top .ms-doors, .t-membership .ms-sec .ms-doors { margin-top: 12px; }
/* ---- membership pages: the base of the template (builder 2 adds the showpieces and signatures) */
.ms-glance { padding: 64px 0; border-bottom: 1px solid var(--ms-line); }
.ms-glance .ms-h2s { text-align: center; }
.ms-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 26px; }
/* each figure sizes itself to its column, so a word figure (Unbegrenzt) fits beside the numbers */
.ms-fig { display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; container-type: inline-size; }
.ms-fig b { font: 600 min(56px, 19cqw)/1 Outfit, Inter, sans-serif; letter-spacing: -.04em; color: var(--ms-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ms-fig-l { max-width: 22ch; font-size: 14.5px; line-height: 1.45; color: var(--dim); text-wrap: balance; }
.ms-b-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 56px; align-items: start; }
.ms-b-side { position: sticky; top: 108px; }
.ms-b-side .mcw { width: 100%; }
.ms-b-side .mc { --rx0: 4deg; --ry0: -8deg; }
.ms-b-list { display: grid; gap: 16px; min-width: 0; }
.ms-b-k { margin-top: 8px; font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); }
.ms-b { position: relative; padding: 24px 26px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 24px 60px -48px var(--ms-shadow); scroll-margin-top: 96px; }
.ms-b h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: var(--ms-ink); text-wrap: balance; }
.ms-b > p, .ms-b-more > p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--prose); text-wrap: pretty; }
.ms-how { counter-reset: ms-how; list-style: none; display: grid; gap: 8px; margin: 14px 0 0; padding: 0; font-size: 15px; line-height: 1.5; color: var(--prose); }
.ms-how li { counter-increment: ms-how; position: relative; min-height: 24px; padding-left: 36px; text-wrap: pretty; }
.ms-how li::before { content: counter(ms-how); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font: 600 12.5px/1 Inter, sans-serif; color: var(--ms-acc); background: var(--ms-tint); }
.ms-how b, .ms-b > p b { font-weight: 600; color: var(--ms-ink); }
/* ---- "Alles, was drin ist" as tiles (Leon 2026-09-30). memberships.py fold_benefits gives each article an
icon (.ms-b-ic), a title button (.ms-b-t, aria-expanded) and a panel (.ms-b-more) after its first
paragraph (.ms-b-sum). Without JavaScript: the old list, every panel open, no icon, no chevron. With it
(content.js "Memberships": .ms-b-list.is-tiles): two columns of tiles, the first paragraph clamped to
two lines, the whole tile opens its panel in place (hidden="until-found" while closed, so find in page
still reaches every word). Only opacity and transform move, and not with reduced motion. */
.ms-b-ic, .ms-b-chev { display: none; }
.ms-b-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 0; border: 0; background: none;
font: inherit; color: inherit; letter-spacing: inherit; text-align: left; cursor: default; }
.ms-b-all { display: inline-flex; align-items: center; min-height: 36px; margin: -12px 0 20px; padding: 0 16px; border-radius: 999px; font: 600 14px Inter, sans-serif;
color: var(--ms-acc); background: var(--ms-tint); cursor: pointer; transition: background-color .25s; }
@media (hover: hover) { .ms-b-all:hover { background: color-mix(in srgb, var(--ms-acc) 14%, transparent); } }
.ms-b-list.is-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; overflow-anchor: none; }
.ms-b-list.is-tiles > :not(.ms-b) { grid-column: 1 / -1; }
.ms-b-list.is-tiles > .ms-b-k { margin-top: 14px; }
.ms-b-list.is-tiles > .ms-b-k:first-child { margin-top: 0; }
.is-tiles .ms-b { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 16px 18px 16px 16px; border-radius: 20px;
scroll-margin-top: 104px; transition: box-shadow .25s ease; }
.is-tiles .ms-b > * { grid-column: 2; min-width: 0; }
.is-tiles .ms-b > .ms-b-ic { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--ms-acc); background: var(--ms-tint); }
.ms-b-ic .ic { width: 19px; height: 19px; }
.is-tiles .ms-b h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.is-tiles .ms-b-t { cursor: pointer; }
.is-tiles .ms-b-t .ms-b-chev { display: block; flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ms-acc); transition: transform .3s var(--cm-ease); }
.is-tiles .ms-b-t[aria-expanded="true"] .ms-b-chev { transform: rotate(180deg); }
.is-tiles .ms-b-t:focus-visible { outline: none; }
.is-tiles .ms-b:has(.ms-b-t:focus-visible) { outline: 2px solid var(--ms-acc); outline-offset: 2px; }
.is-tiles .ms-b > .ms-b-sum { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.is-tiles .ms-b:not(.is-open) > .ms-b-sum { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* the closed tile is one big button: the title button's layer covers it (not while open: its links stay reachable) */
.is-tiles .ms-b:not(.is-open) .ms-b-t::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) { .is-tiles .ms-b:not(.is-open):hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-acc) 38%, transparent), 0 22px 44px -32px var(--ms-shadow); } }
.is-tiles .ms-b.is-open { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ms-acc) 45%, transparent), 0 30px 60px -44px var(--ms-shadow); }
.is-tiles .ms-b.is-open > .ms-b-sum { color: var(--prose); }
.is-tiles .ms-b-more { padding-bottom: 2px; }
.is-tiles .ms-b-more > :first-child { margin-top: 12px; }
.is-tiles .ms-b-more > p { font-size: 15px; }
.is-tiles .ms-b.is-open > .ms-b-more { animation: ms-b-open .45s var(--cm-ease) both; }
@keyframes ms-b-open { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
@media (prefers-reduced-motion: reduce) { .is-tiles .ms-b.is-open > .ms-b-more { animation: none; } .is-tiles .ms-b-t .ms-b-chev { transition: none; } }
@media (max-width: 1000px) { .is-tiles .ms-b { padding: 15px 16px 15px 14px; } }
/* the inherited lists ("Dazu alles aus Pro") read in two columns beside the tiles */
@media (min-width: 761px) {
.is-tiles .ms-inherit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; padding: 4px 22px; }
.is-tiles .ms-inherit li { grid-template-columns: minmax(0, 1fr) auto; align-content: start; padding: 13px 0; border-top: 1px solid var(--ms-line); }
.is-tiles .ms-inherit li:nth-child(-n+2) { border-top: 0; }
.is-tiles .ms-inherit .ms-tag { grid-column: 1; justify-self: start; }
.is-tiles .ms-inherit-m { grid-column: 2; grid-row: 1; }
}
/* wide: the tiles take the whole width in three columns, the card moves up beside the heading and
stops being sticky (nothing to follow any more) */
@media (min-width: 1100px) {
.ms-benefits.is-tiled .wrap { position: relative; }
.ms-benefits.is-tiled .ms-sec-head { max-width: calc(100% - 360px); min-height: 156px; }
.ms-benefits.is-tiled .ms-b-grid { display: block; }
.ms-benefits.is-tiled .ms-b-side { position: absolute; top: -8px; right: var(--gutter); width: 300px; will-change: auto; }
.ms-benefits.is-tiled .ms-b-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* phones: one column; the card (a copy of "Auf einen Blick" further up) makes room for the tiles */
@media (max-width: 760px) { .ms-b-list.is-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; } .ms-benefits.is-tiled .ms-b-side { display: none; } .ms-benefits.is-tiled .ms-b-grid { gap: 0; } }
@media (forced-colors: active) { .is-tiles .ms-b > .ms-b-ic { border: 1px solid CanvasText; } }
.ms-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1 Inter, sans-serif; color: var(--ms-acc); background: var(--ms-tint); }
.ms-for { font-size: 15px !important; font-style: italic; color: var(--dim) !important; }
.ms-help { font-size: 14.5px !important; }
.ms-inherit { list-style: none; margin: 4px 0 0; padding: 6px 22px; border-radius: 24px; background: color-mix(in srgb, var(--ms-mist) 70%, #fff); box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-inherit li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 12px 0; font-size: 15px; }
.ms-inherit li + li { border-top: 1px solid var(--ms-line); }
.ms-inherit-l { font-weight: 500; color: var(--ms-ink); }
.ms-inherit .ms-tag { justify-self: end; }
.ms-inherit-h { grid-column: 1; font-size: 13.5px; color: var(--dim); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ms-inherit-m { grid-column: 3; grid-row: 1; font: 600 13px Inter, sans-serif; color: var(--ms-acc); }
.ms-delta { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.ms-delta a { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); transition: box-shadow .25s, transform .25s var(--ease); }
@media (hover: hover) { .ms-delta a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-acc) 40%, transparent), 0 18px 40px -30px var(--ms-shadow); } }
.ms-delta-l { font-weight: 600; font-size: 15.5px; color: var(--ms-ink); }
.ms-delta-v { font-size: 14px; color: var(--ms-acc); font-weight: 500; }
.ms-delta-v.is-new { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--ms-tint); font-size: 12px; font-weight: 600; }
.ms-who-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-who-c { padding: 24px; border-radius: 24px; background: var(--ms-mist); box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-who-c p { font: 500 19px/1.35 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ms-ink); text-wrap: balance; }
.ms-price-card { display: grid; justify-items: start; gap: 10px; padding: 26px 28px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 30px 70px -46px var(--ms-shadow); }
.ms-price .ms-stays { margin-top: 16px; }
.ms-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ms-rules > div { padding: 20px 22px; border-radius: 22px; background: var(--ms-mist); }
.ms-rules h3 { font-size: 18px; color: var(--ms-ink); }
.ms-rules p { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--dim); }
.ms-rules a { color: var(--ms-acc); }
/* the other memberships as small cards of one width (never a card as wide as half the page), centred with the door */
.ms-siblings ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 300px)); justify-content: center; gap: 18px; margin: 0; padding: 0; }
.ms-sib { display: grid; align-content: start; gap: 3px; height: 100%; padding: 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); color: var(--ms-ink); transition: box-shadow .3s, transform .3s var(--ease); }
.ms-sib .mcw { margin-bottom: 12px; }
.ms-sib-t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ms-sib-t b { font: 600 17px Inter, sans-serif; }
.ms-sib-p { font-size: 13.5px; color: var(--dim); white-space: nowrap; }
.ms-sib-c { font-size: 13px; color: var(--dim); }
.ms-sib-s { font-size: 13.5px; line-height: 1.4; color: var(--dim); }
.ms-sib-door { position: relative; overflow: hidden; grid-template-rows: minmax(0, 1fr) auto auto auto; align-content: stretch; min-height: 160px; color: #fff; background: var(--ms-door, linear-gradient(150deg, #2B2DA6, #070A26)); box-shadow: none; }
/* the other audience's hand of cards in the door, fanned; it spreads a little on hover */
.ms-sib-fan { position: relative; display: block; min-height: 124px; margin: 2px 0 14px; }
.ms-sib-fc { position: absolute; top: calc(var(--dy, 0px)); left: var(--x); width: var(--w); z-index: var(--z, 1); transform: rotate(var(--r)); transition: transform .5s var(--ease); }
.ms-sib-fc .mcw { margin: 0; }
.ms-sib-fan-n3 .ms-sib-fc { --w: 50%; }
.ms-sib-fan-n3 .ms-sib-fc:nth-child(1) { --x: 0%; --r: -8deg; --dy: 24px; }
.ms-sib-fan-n3 .ms-sib-fc:nth-child(2) { --x: 25%; --r: 0deg; --z: 3; }
.ms-sib-fan-n3 .ms-sib-fc:nth-child(3) { --x: 52%; --r: 8deg; --dy: 28px; --z: 2; }
.ms-sib-fan-n2 .ms-sib-fc { --w: 58%; }
.ms-sib-fan-n2 .ms-sib-fc:nth-child(1) { --x: 2%; --r: -6deg; --dy: 12px; }
.ms-sib-fan-n2 .ms-sib-fc:nth-child(2) { --x: 40%; --r: 5deg; --z: 2; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.ms-sib-door:hover .ms-sib-fc:nth-child(1) { transform: rotate(var(--r)) translate(-6px, 2px); }
.ms-sib-door:hover .ms-sib-fan-n3 .ms-sib-fc:nth-child(2) { transform: translateY(-5px); }
.ms-sib-door:hover .ms-sib-fc:last-child { transform: rotate(var(--r)) translate(6px, 2px); }
}
.ms-sib-door.ms-a { --ms-door: linear-gradient(150deg, #9A2A5C, #3E0F33 60%, #1E0819); }
.ms-sib-door b { font: 600 22px/1.15 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.ms-sib-k { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.ms-sib-go { display: grid; place-items: center; width: 36px; height: 36px; margin-top: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.ms-sib-go svg, .ms-sib-all svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .ms-sib:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--ms-line), 0 24px 50px -30px var(--ms-shadow); } }
.ms-sib-all { margin-top: 22px; text-align: center; }
.ms-sib-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 15px Inter, sans-serif; color: var(--ms-acc); }
/* ---- phones and tablets */
@media (max-width: 1199px) { .ms-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }
@media (max-width: 1099px) {
.ms-b-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ms-b-side { position: static; order: -1; max-width: 420px; }
}
@media (max-width: 1000px) {
.ms-n3 { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.ms-coa .ms-tile.is-hl { transform: none; }
.ms-fee-cards, .ms-rules, .ms-who-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.ms-hero { padding: 96px 0 72px; }
.ms-hero-in, .ms-cmp .ms-hero-in { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ms-hero-card { order: -1; }
.ms-hero-card .mc { --rx0: 3deg; --ry0: -4deg; }
.ms-cmp .ms-fan { order: -1; min-height: 0; width: 100%; max-width: 620px; margin: 0 auto; }
.ms-band-in { grid-template-columns: minmax(0, 1fr); }
.ms-band-card .mcw { max-width: 300px; }
}
@media (max-width: 860px) {
.ms-n2 { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.ms-time, .ms-stays, .ms-bes, .ms-delta { grid-template-columns: minmax(0, 1fr); }
.ms-time::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; }
}
@media (max-width: 700px) {
.ms-sec { padding: 72px 0; }
/* the chips never shrink: where "Alle vergleichen" and every chip do not share a line, the chips take the next one
(the own chip always in view); a chip row wider than the phone scrolls inside itself, never the page */
.ms-switch { flex-wrap: wrap; margin-bottom: 28px; }
.ms-switch ul { flex: none; max-width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ms-switch ul::-webkit-scrollbar { display: none; }
.ms-switch li { scroll-snap-align: start; }
.ms-sw-all span, .ms-sw-all { font-size: 13.5px; }
.ms-ctl { flex-direction: column; align-items: stretch; }
.ms-aud, .ms-bill { width: 100%; }
.ms-aud-l { padding: 0 12px; }
.ms-tile { padding: 22px 20px; border-radius: 24px; }
.ms-fan-c { width: min(300px, 62%); gap: 12px; }
.ms-fan-n3 .ms-fan-c { width: auto; }
.ms-fan-n2 .ms-fan-c:nth-child(2) { --dy: 30px; }
.ms-fan-l { font-size: 12.5px; padding: 6px 10px; }
.ms-fig b { font-size: min(40px, 19cqw); }
.ms-b { padding: 20px; }
.ms-inherit { padding: 4px 16px; }
.ms-inherit li { grid-template-columns: minmax(0, 1fr) auto; }
.ms-inherit .ms-tag { grid-column: 1; justify-self: start; }
.ms-inherit-m { grid-column: 2; grid-row: 1 / span 3; }
}
/* the comparison as rows on a phone: the feature on its own line, the plans' values below it; the head
(the plans with their swatches) sticks under the bar; never a sideways scroll */
@media (max-width: 600px) {
.pr-table, .pr-table thead, .pr-table tbody { display: block; }
.pr-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-n3 .pr-table tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-table thead { position: sticky; top: 68px; z-index: 3; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); border-bottom: 1px solid var(--ms-line); }
.pr-table thead th, .pr-table thead td { position: static; padding: 10px 4px 8px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; }
.pr-table thead .is-hl { background: none; box-shadow: none; }
.pr-table .pr-corner { display: none; }
.pr-hlink { gap: 6px; }
.pr-hn { font-size: 16px; }
.pr-gh th { grid-column: 1 / -1; padding: 30px 0 10px; }
.pr-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 14px 0 2px; border: 0; font-size: 15px; }
.pr-table td { padding: 8px 4px 14px; }
.pr-rh { font-size: 13px; }
.pr-v { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.ms-flip-in { transition: none; transform: none !important; }
.ms-face { transition: opacity .2s ease; }
.ms-face.is-back { transform: none; opacity: 0; }
.ms-flip.is-flipped .ms-face.is-front { opacity: 0; }
.ms-flip.is-flipped .ms-face.is-back { opacity: 1; }
.ms-fan-c, .ms-fan-c:hover, .ms-fan-n3 .ms-fan-c .mcw { transition: none; }
.ms-bill::before, .pr-price > div { transition: none; }
}
@media (forced-colors: active) {
.ms-bill::before { display: none; }
.ms-bill input:checked + label, .ms-aud-l[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
.pr-no { background: CanvasText; }
.ms-tile, .ms-b, .ms-fee-c, .ms-be, .ms-sib { border: 1px solid CanvasText; }
}
@media print {
.ms-ctl, .ms-turn, .ms-switch { display: none; }
.pr-table thead th, .pr-table thead td { position: static; }
}
/* the bar on a membership page (build.py mark_memberships): the word Memberships is where you are, dark ink and a
small dot in the audience's colours (like the landing pages mark their own word); on the athletes' warm pages
the bar's button and the Anmelden pill leave the bright indigo for the dusk plum and rose */
.nav[data-ms-bar="athlete"] { --ms-bar-dot: linear-gradient(135deg, #FB923C, #E11D48); }
.nav[data-ms-bar="coach"] { --ms-bar-dot: linear-gradient(135deg, #6366F1, #0EA5E9); }
@media (min-width: 1100px) {
.nav .mm-item.is-here > :is(.mm-btn, .mm-tog) { color: var(--ink); }
.nav .mm-item.is-here > .mm-btn { position: relative; }
.nav .mm-item.is-here > .mm-btn::after { content: ""; position: absolute; left: calc(50% + 4.5px); bottom: 1px; width: 5px; height: 5px; border-radius: 50%;
background: var(--ms-bar-dot, var(--violet)); transform: translateX(-50%); }
.nav.on-dark:not(.mm-open) .mm-item.is-here > :is(.mm-btn, .mm-tog) { color: #fff; }
}
.nav[data-ms-bar="athlete"] :is(.nav-right, .mm-foot) .btn-primary { background: #3A0E2C; box-shadow: 0 10px 24px -12px rgba(58, 14, 44, .75); }
.nav[data-ms-bar="athlete"] :is(.nav-right, .mm-foot) .btn-primary:hover { background: #57163F; }
.nav[data-ms-bar="athlete"] .nav-login { color: #8E1F52; background: rgba(184, 50, 95, .07); box-shadow: inset 0 0 0 1px rgba(184, 50, 95, .2); }
.nav[data-ms-bar="athlete"] .nav-login:hover { color: #6E1640; background: rgba(184, 50, 95, .12); box-shadow: inset 0 0 0 1px rgba(184, 50, 95, .3); }
.nav[data-ms-bar="athlete"].on-dark:not(.mm-open) .nav-right .btn-primary { background: #fff; color: #3A0E2C; box-shadow: 0 12px 28px -14px rgba(8, 4, 20, .7); }
.nav[data-ms-bar="athlete"].on-dark:not(.mm-open) .nav-right .btn-primary:hover { background: #FFF1EA; }
.nav[data-ms-bar="athlete"].on-dark:not(.mm-open) .nav-login { color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.nav[data-ms-bar="athlete"] :focus-visible { outline-color: #B8325F; }
@media (forced-colors: active) { .nav .mm-item.is-here > .mm-btn::after { background: CanvasText; } }
/* <<< Memberships */
/* ==========================================================================
>>> Membership pages (builder 2): the showpieces and signatures of Free, Premium, Pro and Elite.
The five membership pages (and their English twins) share the template of builder 1 ("Memberships"
above); this block adds what is each tier's own:
Free, athletes Tageslicht warm: "Ein Tag mit Free", a day band with eight glass notes; the
sunrise in the card's corner warms a little as the page scrolls
Premium Abendrot: the sun on the hero card sinks to the horizon over the first 700 px,
dusk falls, the stage deepens; "Ein Monat mit Premium", four frames
Free, coaches Tageslicht cool: "Dein Laden steht", a bento of ten tiles; the three seats light
Pro Blaue Stunde: the 15 seats light one by one, a band of window light sweeps the
satin; "Montagmorgen", three frames; a row of 15 seats fills with scroll
Elite Sternennacht: the aurora drifts past the card over the night, three stars
twinkle, the infinity draws itself; "Die Gebühr verschwindet"
Shared: the scroll story (.ms-story, a sticky stage from 1100 px, a snap carousel on phones, a grid
with reduced motion or without JavaScript), the next card that slides out from behind this one,
the bands of the Free pages in daylight. Only transform and opacity move; every end state is the
plain CSS state, so reduced motion, old browsers and no JavaScript show the finished picture.
content.js ("Membership pages") arms the stories, the fee bar and the pauses off screen.
========================================================================== */
/* ---- shared: a showpiece stage (a full width band in the tier's light) */
.ms-show { position: relative; isolation: isolate; overflow-x: clip; padding: 108px 0 116px; }
.ms-show::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mc-grain); background-size: 160px; opacity: .05; mix-blend-mode: overlay; }
.ms-show .ms-sec-head { margin-bottom: 52px; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight).ms-show .ms-sec-head h2 { color: #fff; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight).ms-show .ms-sec-head > p:last-child:not(.kicker) { color: var(--ms-on); }
:is(.ms-st-day-a, .ms-st-day-c).ms-show .ms-sec-head > p:last-child:not(.kicker) { color: var(--ms-on); }
/* a section head whose subtitle is followed by a sample label keeps the subtitle's look */
.ms-sec-head > h2 + p:not(:last-child) { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--dim); text-wrap: pretty; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight).ms-show .ms-sec-head > h2 + p { color: var(--ms-on); }
/* the sample label every showpiece carries */
.ms-demo { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .03em;
color: color-mix(in srgb, var(--ms-ink) 70%, transparent); background: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px var(--ms-line); white-space: nowrap; }
.ms-demo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
:is(.ms-st-dusk, .ms-st-blue, .ms-st-night, .ms-st-bluenight) .ms-demo { color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.ms-sec-head .ms-demo { margin-top: 16px; }
/* ---- shared: the scroll story. Each step is its text and its frame. Without JavaScript and with
reduced motion: a grid of cards. Phones: a snap carousel that scrolls inside itself. From 1100 px
with motion (content.js sets .is-story): the texts scroll on the left, the frames stand in one
sticky place on the right and cross fade to the step in the middle of the window. */
.ms-story { --n: 4; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; counter-reset: none; }
.ms-story.ms-n3 { --n: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
.ms-step { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ms-step-t { max-width: 460px; }
.ms-step-k { display: inline-flex; align-items: center; gap: 10px; font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ms-acc-d); }
.ms-step-k::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .7; }
.ms-step-t h3 { margin-top: 12px; font-size: clamp(23px, 2.3vw, 32px); line-height: 1.12; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.ms-step-t p { margin-top: 12px; font-size: 16.5px; line-height: 1.62; color: var(--ms-on); text-wrap: pretty; }
.ms-step-t p b { font-weight: 600; color: #fff; }
.ms-step-t .ms-help a { color: var(--ms-acc-d); }
/* the frame: a window of sky with the app inside; its size follows its own width (cqw) */
.ms-frame { position: relative; isolation: isolate; container: ms-fr / inline-size; display: grid; align-content: center; justify-items: start; margin: 0; min-width: 0; aspect-ratio: 5 / 4; padding: 7% 7.5%;
border-radius: 30px; overflow: clip; background: var(--sky, #3E0F33); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .22); }
.ms-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--mc-grain); background-size: 160px; opacity: .12; mix-blend-mode: overlay; }
.ms-frame .ms-demo { position: absolute; right: 16px; top: 16px; z-index: 3; }
/* the app card inside a frame: light glass with the app's own words */
.ms-app { position: relative; z-index: 2; width: min(100%, 420px); padding: 18px 18px 16px; border-radius: 22px; color: var(--ms-ink); font-size: 14px; line-height: 1.4;
background: linear-gradient(160deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .88)); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .8);
-webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); }
.ms-app-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 600 16px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; }
.ms-app-h small { font: 500 12px Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 60%, transparent); letter-spacing: 0; }
.ms-app-tabs { display: flex; gap: 4px; margin-top: 12px; padding: 3px; border-radius: 999px; background: var(--ms-mist2); }
.ms-app-tabs span { flex: 1; min-height: 28px; display: grid; place-items: center; border-radius: 999px; font: 600 12px Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 62%, transparent); }
.ms-app-tabs .is-on { background: #fff; color: var(--ms-ink); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .3); }
.ms-app-l { margin-top: 12px; font: 600 11.5px/1.3 Inter, sans-serif; letter-spacing: .02em; color: color-mix(in srgb, var(--ms-ink) 64%, transparent); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ms-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px; border-radius: 999px; font: 600 12px/1 Inter, sans-serif; color: var(--ms-ink); background: var(--ms-mist2); white-space: nowrap; }
.ms-chip b { font-weight: 700; }
.ms-chip.is-hot { color: #fff; background: var(--ms-grad); }
.ms-btnx { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; margin-top: 12px; padding: 0 14px; border-radius: 999px; font: 600 12.5px Inter, sans-serif; color: #fff; background: var(--ms-ink); }
.ms-btnx.is-soft { color: var(--ms-ink); background: var(--ms-mist2); }
.ms-meter { position: relative; height: 6px; margin-top: 7px; border-radius: 6px; background: var(--ms-mist2); overflow: hidden; }
.ms-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--ms-grad); transform-origin: 0 50%; transform: scaleX(var(--m, .1)); }
.ms-row2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ms-row2 > span:last-child { white-space: nowrap; }
/* desktop, with motion: the sticky stage */
@media (min-width: 1100px) {
.ms-story.is-story { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: repeat(var(--n), auto); column-gap: 88px; row-gap: 0; }
.ms-story.is-story .ms-step { display: contents; }
.ms-story.is-story .ms-step-t { grid-column: 1; min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; opacity: .28; transition: opacity .6s var(--cm-ease); }
.ms-story.is-story .ms-step:nth-child(1) .ms-step-t { grid-row: 1; }
.ms-story.is-story .ms-step:nth-child(2) .ms-step-t { grid-row: 2; }
.ms-story.is-story .ms-step:nth-child(3) .ms-step-t { grid-row: 3; }
.ms-story.is-story .ms-step:nth-child(4) .ms-step-t { grid-row: 4; }
.ms-story.is-story .ms-frame { grid-column: 2; grid-row: 1 / -1; align-self: start; position: sticky; top: max(96px, calc(50vh - 300px)); width: min(100%, calc((100vh - 170px) * 1.25));
justify-self: end; opacity: 0; transform: translate3d(0, 18px, 0) scale(.985); transition: opacity .7s var(--cm-ease), transform .9s var(--cm-ease); pointer-events: none; }
.ms-story.is-story .ms-step.is-on .ms-step-t { opacity: 1; }
.ms-story.is-story .ms-step.is-on .ms-frame { opacity: 1; transform: none; pointer-events: auto; z-index: 1; }
}
/* wide, without the story (reduced motion, no JavaScript): one row per step, the text beside its frame */
@media (min-width: 1100px) {
.ms-story:not(.is-story), .ms-story.ms-n3:not(.is-story) { grid-template-columns: minmax(0, 1fr); gap: 72px; }
.ms-story:not(.is-story) .ms-step { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 88px; align-items: center; }
.ms-story:not(.is-story) .ms-frame { justify-self: end; width: min(100%, 720px); }
}
@media (max-width: 1099px) {
.ms-story.ms-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms-story.ms-n3 .ms-step:last-child { grid-column: 1 / -1; }
.ms-story.ms-n3 .ms-step:last-child .ms-frame { aspect-ratio: 2 / 1; }
}
/* phones: a carousel that snaps, scrolls inside itself and shows the next frame's edge */
@media (max-width: 759px) {
.ms-story, .ms-story.ms-n3 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px;
scroll-padding: 0 var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.ms-story::-webkit-scrollbar { display: none; }
.ms-step { flex: 0 0 min(86%, 380px); scroll-snap-align: start; flex-direction: column-reverse; justify-content: flex-end; gap: 18px; }
.ms-story.ms-n3 .ms-step:last-child .ms-frame { aspect-ratio: 4 / 5; }
.ms-frame { aspect-ratio: 4 / 5; padding: 18px 16px 50px; border-radius: 26px; justify-items: stretch; }
.ms-frame .ms-demo { top: auto; bottom: 14px; right: 14px; }
.ms-app { width: 100%; }
.ms-step-t h3 { font-size: 22px; }
.ms-step-t p { font-size: 15.5px; }
.ms-swipe { display: flex; }
}
.ms-swipe { display: none; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font: 500 13px Inter, sans-serif; color: var(--ms-quiet); }
.ms-swipe svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
.ms-story, .ms-story.ms-n3 { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; margin: 0; padding: 0; gap: 36px; }
.ms-swipe { display: none; }
}
/* the frame's own motion waits until its step is on (content.js: .ms-armed, .is-on); without the
arming (no JavaScript) it simply plays once */
.ms-armed .ms-step:not(.is-on) .ms-an, .ms-armed .ms-step:not(.is-on) .ms-an * { animation-play-state: paused !important; }
/* ---- shared: the next card slides out from behind this one as the section arrives */
.ms-next { background: linear-gradient(180deg, #fff, var(--ms-mist) 55%, #fff); }
.ms-next-in { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px 72px; align-items: center; }
.ms-deck { position: sticky; top: 120px; align-self: start; aspect-ratio: 1.36; margin: 12px 0 40px; }
.ms-deck > span { position: absolute; display: block; width: 74%; }
.ms-deck .mcw { max-width: none; }
.ms-deck-this { z-index: 2; left: 0; bottom: 0; }
.ms-deck-this .mc { --rx0: 4deg; --ry0: 10deg; --rz0: -5deg; }
.ms-deck-next { z-index: 1; right: 0; top: 0; transform: rotate(5deg); }
.ms-deck-next .mc { --rx0: 4deg; --ry0: -8deg; }
.ms-next-t .ms-sec-head { margin-bottom: 22px; }
.ms-next-t .ms-delta { grid-template-columns: minmax(0, 1fr); }
.ms-next-price { display: grid; gap: 10px; justify-items: start; margin-top: 22px; padding: 22px 24px; border-radius: 24px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 30px 70px -48px var(--ms-shadow); }
.ms-next-price .ms-cta { margin-top: 6px; }
.ms-next-price .ms-remark { margin-top: 0; font-size: 14px; }
.ms-next-price .ms-launch { margin-top: 0; }
.ms-next-go { margin-top: 18px; }
.ms-next-go a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 15px Inter, sans-serif; color: var(--ms-acc); }
.ms-next-go svg, .ms-top-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) { .ms-next-go a:hover svg { transform: translateX(3px); } }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ms-deck-next { animation: ms-slide-out linear both; animation-timeline: view(); animation-range: entry 15% cover 48%; }
}
}
@keyframes ms-slide-out { from { transform: translate3d(-35%, 50%, 0) rotate(-5deg); } }
@media (max-width: 900px) {
.ms-next-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ms-deck { position: relative; top: auto; max-width: 480px; width: 100%; margin: 0 auto 8px; }
}
/* ---- shared: the quiet text link under the top plan's buttons ("Pro ansehen") and in its band */
.ms-alt, .ms-band-alt { margin-top: 16px; }
.ms-alt a, .ms-band-alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 600 15px Inter, sans-serif; color: var(--ms-on); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.ms-alt svg, .ms-band-alt svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
@media (hover: hover) { .ms-alt a:hover, .ms-band-alt a:hover { color: #fff; } .ms-alt a:hover svg, .ms-band-alt a:hover svg { transform: translateX(3px); } }
.ms-hero .ms-alt { margin-top: 10px; }
/* ---- shared: four rules side by side in pairs (coach plans: trial, switching, cancelling, withdrawal) */
.ms-rules.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .ms-rules.is-4 { grid-template-columns: minmax(0, 1fr); } }
/* ---- shared: honest notes at the top tiers (Ganz oben angekommen) */
.ms-honest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.ms-honest li { position: relative; padding: 18px 20px 18px 50px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); font-size: 15px; line-height: 1.55; color: var(--prose); text-wrap: pretty; }
.ms-honest li::before { content: ""; position: absolute; left: 18px; top: 19px; width: 20px; height: 20px; border-radius: 50%; background: var(--ms-tint); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--ms-acc) 55%, transparent); }
.ms-honest b { font-weight: 600; color: var(--ms-ink); }
@media (max-width: 760px) { .ms-honest { grid-template-columns: minmax(0, 1fr); } }
/* ---- shared: the bands and "Was Free kostet" of the Free pages, in daylight */
.ms-band:is(.ms-st-day-a, .ms-st-day-c) { color: var(--ms-ink); }
.ms-band:is(.ms-st-day-a, .ms-st-day-c) h2 { color: var(--ms-ink); }
.ms-band:is(.ms-st-day-a, .ms-st-day-c) .ms-band-t > p:not(.kicker) { color: var(--ms-on); }
.ms-cost { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ms-cost-big { display: grid; align-content: start; gap: 12px; padding: 28px 30px; border-radius: 28px; background: linear-gradient(160deg, #fff, var(--ms-mist)); box-shadow: inset 0 0 0 1px var(--ms-line), 0 30px 70px -48px var(--ms-shadow); }
.ms-cost-big > b { font: 600 clamp(56px, 7vw, 88px)/.95 Outfit, Inter, sans-serif; letter-spacing: -.05em; color: var(--ms-ink); }
.ms-cost-big > p { font-size: 16.5px; line-height: 1.6; color: var(--prose); text-wrap: pretty; }
.ms-cost-big .ms-launch { margin-top: 4px; }
.ms-cost-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ms-cost-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: baseline; padding: 16px 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); }
.ms-cost-list b { grid-row: span 2; min-width: 64px; font: 600 24px/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; color: var(--ms-ink); white-space: nowrap; }
.ms-cost-list span { font-weight: 600; font-size: 15.5px; color: var(--ms-ink); }
.ms-cost-list small { font-size: 14px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.ms-keep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 18px; }
.ms-keep b { font: 600 clamp(36px, 4vw, 48px)/1 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: var(--ms-ink); font-variant-numeric: tabular-nums; }
.ms-keep span { font-size: 15.5px; color: var(--dim); }
@media (max-width: 860px) { .ms-cost { grid-template-columns: minmax(0, 1fr); } }
/* ---- shared: the numbered situations of "Für wen" */
.ms-who-cards { counter-reset: ms-who; }
.ms-who-c { position: relative; padding-top: 58px; }
.ms-who-c::before { counter-increment: ms-who; content: counter(ms-who, decimal-leading-zero); position: absolute; left: 24px; top: 22px; font: 600 13px/1 Inter, sans-serif; letter-spacing: .12em; color: var(--ms-acc); }
.ms-who-c > p + p { margin-top: 10px; font: 400 15px/1.55 Inter, sans-serif; letter-spacing: 0; color: var(--dim); }
/* ==========================================================================
Free, athletes: Tageslicht warm
========================================================================== */
/* the sunrise in the card's corner warms a little as the page scrolls (an opacity layer) */
.ms-p-free.ms-ath .ms-hero .mcw-hero .mc-motif::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: radial-gradient(40cqw 32cqw at 90% 106%, rgba(255, 150, 96, .8), rgba(255, 150, 96, 0) 70%), radial-gradient(30cqw 18cqw at 64% 112%, rgba(242, 100, 92, .4), rgba(242, 100, 92, 0) 70%); }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
.ms-p-free.ms-ath .ms-hero .mcw-hero .mc-motif::after { animation: ms-to-one linear both; animation-timeline: scroll(root); animation-range: 0px 600px; }
}
}
@keyframes ms-to-one { from { opacity: 0; } to { opacity: 1; } }
/* "Ein Tag mit Free": the day from morning to night, eight notes on a time line */
.ms-day { background: linear-gradient(180deg, #fff 0%, #FFF6F1 18%, #FFEDE6 60%, #fff 100%); }
.ms-day-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ms-dayband { position: relative; isolation: isolate; overflow: hidden; padding: 30px 28px 26px; border-radius: 34px;
background: linear-gradient(90deg, #FFE7D2 0%, #FFF4E6 18%, #FFF8F0 42%, #FFE3D8 64%, #F6A889 80%, #9A2A5C 93%, #3E0F33 100%);
box-shadow: 0 50px 100px -60px rgba(142, 31, 82, .55), inset 0 0 0 1px rgba(255, 255, 255, .7); }
.ms-dayband::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: radial-gradient(14% 38% at 6% 100%, rgba(255, 190, 120, .9), rgba(255, 190, 120, 0) 70%), radial-gradient(20% 50% at 50% -10%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
radial-gradient(1px 1px at 91% 16%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 96% 30%, #fff 99%, transparent), radial-gradient(1px 1px at 88% 40%, #FFE4D6 99%, transparent), radial-gradient(1px 1px at 98% 10%, #fff 99%, transparent); }
.ms-dayband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)); }
.ms-day-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ms-day-top .ms-demo { position: static; }
.ms-day-k { font: 600 12.5px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); }
.ms-notes { position: relative; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); grid-template-rows: auto 44px auto; column-gap: 8px; }
.ms-note { display: contents; }
.ms-note-c { position: relative; align-self: end; margin: 0; padding: 12px 13px 12px; border-radius: 18px; font-size: 13px; line-height: 1.4; color: var(--ms-ink);
background: linear-gradient(160deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .62)); box-shadow: 0 18px 40px -26px rgba(142, 31, 82, .45), inset 0 0 0 1px rgba(255, 255, 255, .9);
-webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
/* note i spans three columns from 2i-1, its dot sits under its middle (column 2i); odd notes above the line, even below */
.ms-note:nth-of-type(odd) .ms-note-c { grid-row: 1; }
.ms-note:nth-of-type(even) .ms-note-c { grid-row: 3; align-self: start; }
.ms-note:nth-of-type(1) .ms-note-c { grid-column: 1 / span 3; } .ms-note:nth-of-type(1) .ms-note-d { grid-column: 2; }
.ms-note:nth-of-type(2) .ms-note-c { grid-column: 3 / span 3; } .ms-note:nth-of-type(2) .ms-note-d { grid-column: 4; }
.ms-note:nth-of-type(3) .ms-note-c { grid-column: 5 / span 3; } .ms-note:nth-of-type(3) .ms-note-d { grid-column: 6; }
.ms-note:nth-of-type(4) .ms-note-c { grid-column: 7 / span 3; } .ms-note:nth-of-type(4) .ms-note-d { grid-column: 8; }
.ms-note:nth-of-type(5) .ms-note-c { grid-column: 9 / span 3; } .ms-note:nth-of-type(5) .ms-note-d { grid-column: 10; }
.ms-note:nth-of-type(6) .ms-note-c { grid-column: 11 / span 3; } .ms-note:nth-of-type(6) .ms-note-d { grid-column: 12; }
.ms-note:nth-of-type(7) .ms-note-c { grid-column: 13 / span 3; } .ms-note:nth-of-type(7) .ms-note-d { grid-column: 14; }
.ms-note:nth-of-type(8) .ms-note-c { grid-column: 15 / span 3; } .ms-note:nth-of-type(8) .ms-note-d { grid-column: 16; }
.ms-note-c time { display: block; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .06em; color: var(--ms-acc); font-variant-numeric: tabular-nums; }
.ms-note-c b { display: block; margin-top: 6px; font: 600 15px/1.2 Outfit, Inter, sans-serif; letter-spacing: -.01em; color: var(--ms-ink); }
.ms-note-c span { display: block; margin-top: 4px; color: color-mix(in srgb, var(--ms-ink) 72%, transparent); text-wrap: pretty; }
.ms-note-c .ms-chip { display: inline-flex; width: fit-content; margin-top: 8px; min-height: 22px; padding: 0 9px; font-size: 11px; color: var(--ms-ink); background: rgba(255, 237, 230, .95); }
.ms-note-c .ms-chip.is-green { color: #065F46; background: #D1FAE5; }
/* the dot on the line and its stem */
.ms-note-d { grid-row: 2; align-self: center; justify-self: center; position: relative; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .45), inset 0 0 0 4px var(--ms-acc); z-index: 1; }
.ms-note-d::before { content: ""; position: absolute; left: 6px; width: 2px; height: 22px; background: linear-gradient(var(--ms-acc), transparent); opacity: .4; }
.ms-note:nth-of-type(odd) .ms-note-d::before { bottom: 12px; transform: scaleY(-1); transform-origin: 50% 100%; }
.ms-note:nth-of-type(even) .ms-note-d::before { top: 12px; }
.ms-note:nth-of-type(n+7) .ms-note-d { box-shadow: 0 0 0 4px rgba(255, 255, 255, .14), inset 0 0 0 4px #FFC7D6; background: #3E0F33; }
.ms-note:nth-of-type(n+7) .ms-note-d::before { background: linear-gradient(#FFC7D6, transparent); }
.ms-dayline { grid-row: 2; grid-column: 2 / 17; align-self: center; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(184, 50, 95, .25), rgba(184, 50, 95, .6) 60%, rgba(255, 199, 214, .8)); }
.ms-day-foot { display: flex; justify-content: space-between; margin-top: 14px; font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--ms-ink) 55%, transparent); }
.ms-day-foot span:last-child { color: rgba(255, 228, 214, .8); }
/* two samples of Premium that Free already has */
.ms-tastes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ms-taste { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; align-items: start; padding: 22px 24px; border-radius: 26px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 30px 70px -50px var(--ms-shadow); }
.ms-taste-k { grid-column: 1 / -1; font: 600 12px/1.3 Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ms-acc); }
.ms-taste-v { grid-row: span 2; font: 600 54px/1 Outfit, Inter, sans-serif; letter-spacing: -.04em; background: var(--ms-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.ms-taste h3 { font-size: 20px; line-height: 1.2; color: var(--ms-ink); text-wrap: balance; }
.ms-taste p { font-size: 15px; line-height: 1.55; color: var(--prose); text-wrap: pretty; }
/* the notes arrive one after another as the band comes into view (content.js: .is-armed, .is-in) */
@media (prefers-reduced-motion: no-preference) {
.ms-dayband.is-armed .ms-note-c, .ms-dayband.is-armed .ms-note-d { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
.ms-dayband.is-armed .ms-dayline { transform: scaleX(0); transform-origin: 0 50%; }
.ms-dayband.is-in .ms-dayline { transform: none; transition: transform 1.6s var(--cm-ease); }
.ms-dayband.is-in .ms-note-c, .ms-dayband.is-in .ms-note-d { opacity: 1; transform: none; transition: opacity .8s var(--cm-ease), transform 1s var(--cm-ease); transition-delay: calc(.25s + var(--i, 0) * .14s); }
}
@media (max-width: 1099px) {
/* a vertical time line */
.ms-dayband { padding: 26px 22px; background: linear-gradient(180deg, #FFE7D2 0%, #FFF4E6 14%, #FFF8F0 40%, #FFE3D8 62%, #F6A889 80%, #9A2A5C 93%, #3E0F33 100%); }
.ms-dayband::before { background: radial-gradient(40% 10% at 0% 0%, rgba(255, 190, 120, .9), rgba(255, 190, 120, 0) 70%), radial-gradient(1px 1px at 86% 94%, #fff 99%, transparent), radial-gradient(1.2px 1.2px at 70% 97%, #fff 99%, transparent); }
.ms-notes { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; column-gap: 14px; row-gap: 12px; max-width: 560px; }
.ms-note .ms-note-c, .ms-note:nth-of-type(n) .ms-note-c { grid-column: 2; align-self: start; }
.ms-note .ms-note-d, .ms-note:nth-of-type(n) .ms-note-d { grid-column: 1; align-self: center; }
.ms-note-d::before { display: none; }
.ms-notes .ms-note:nth-of-type(1) > * { grid-row: 1; } .ms-notes .ms-note:nth-of-type(2) > * { grid-row: 2; } .ms-notes .ms-note:nth-of-type(3) > * { grid-row: 3; } .ms-notes .ms-note:nth-of-type(4) > * { grid-row: 4; }
.ms-notes .ms-note:nth-of-type(5) > * { grid-row: 5; } .ms-notes .ms-note:nth-of-type(6) > * { grid-row: 6; } .ms-notes .ms-note:nth-of-type(7) > * { grid-row: 7; } .ms-notes .ms-note:nth-of-type(8) > * { grid-row: 8; }
.ms-dayline { grid-column: 1; grid-row: 1 / span 8; justify-self: center; align-self: stretch; width: 2px; height: auto; background: linear-gradient(180deg, rgba(184, 50, 95, .25), rgba(184, 50, 95, .6) 70%, rgba(255, 199, 214, .8)); }
.ms-dayband.is-armed .ms-dayline { transform: scaleY(0); transform-origin: 50% 0; }
.ms-dayband.is-armed.is-in .ms-dayline { transform: none; }
.ms-note:nth-of-type(n+7) .ms-note-c { background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74)); }
.ms-day-foot { display: none; }
.ms-tastes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.ms-taste { grid-template-columns: minmax(0, 1fr); }
.ms-taste-v { grid-row: auto; font-size: 46px; }
}
/* ==========================================================================
Premium: Abendrot
========================================================================== */
/* the golden moment is the plain state: the sun stands above the horizon (58 % instead of 63 %) */
.ms-p-premium .ms-hero .mcw-hero .mc-sun { transform: translate3d(0, -5%, 0); }
.ms-p-premium .ms-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
background: radial-gradient(60% 50% at 72% 110%, rgba(122, 33, 72, .55), rgba(122, 33, 72, 0) 70%), linear-gradient(180deg, #12030E 0%, #22061C 45%, #3A0C2E 100%); }
@supports (animation-timeline: scroll()) {
@media (prefers-reduced-motion: no-preference) {
/* over the first 700 px: the sun sinks to the horizon, dusk falls over the golden sky, the light
on the water shortens and the stage deepens from coral to plum */
.ms-p-premium .ms-hero .mcw-hero .mc-sun { animation: ms-sink linear both; animation-timeline: scroll(root); animation-range: 0px 700px; }
.ms-p-premium .ms-hero .mcw-hero .mc-dusk { animation: ms-dusk linear both; animation-timeline: scroll(root); animation-range: 0px 700px; }
.ms-p-premium .ms-hero .mcw-hero .mc-water { animation: ms-ebb linear both; animation-timeline: scroll(root); animation-range: 0px 700px; }
.ms-p-premium .ms-hero::before { animation: ms-deepen linear both; animation-timeline: scroll(root); animation-range: 0px 700px; }
}
}
@keyframes ms-sink { from { transform: translate3d(0, -5%, 0); } to { transform: none; } }
@keyframes ms-dusk { from { opacity: 0; } to { opacity: 1; } }
@keyframes ms-ebb { from { transform: none; } to { transform: scaleY(.36); } }
@keyframes ms-deepen { from { opacity: 0; } to { opacity: .82; } }
/* "Ein Monat mit Premium": four frames, the sky moves from dusk to golden hour */
.ms-month .ms-step:nth-child(1) .ms-frame { --sky: linear-gradient(180deg, #14040F 0%, #2E0C33 34%, #5A1646 70%, #8E2A52 100%); --sun-y: 83%; --sun-o: .55; }
.ms-month .ms-step:nth-child(2) .ms-frame { --sky: linear-gradient(180deg, #22081D 0%, #4A1340 38%, #8E1F52 74%, #C8475F 100%); --sun-y: 76%; --sun-o: .7; }
.ms-month .ms-step:nth-child(3) .ms-frame { --sky: linear-gradient(180deg, #3A0E2C 0%, #7A2148 36%, #C8475F 68%, #F2735E 100%); --sun-y: 66%; --sun-o: .85; }
.ms-month .ms-step:nth-child(4) .ms-frame { --sky: linear-gradient(180deg, #5A1646 0%, #9A2A5C 26%, #E0584F 52%, #FF9E74 76%, #FFD09C 100%); --sun-y: 52%; --sun-o: 1; }
.ms-sun { position: absolute; z-index: -1; left: 74%; top: var(--sun-y, 70%); width: 34cqw; height: 34cqw; margin: -17cqw 0 0 -17cqw; border-radius: 50%; pointer-events: none; opacity: var(--sun-o, 1);
background: radial-gradient(closest-side, #FFF6E6 0%, #FFE0B0 22%, rgba(255, 196, 142, .55) 42%, rgba(255, 150, 110, 0) 100%); }
.ms-sea { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 17%; pointer-events: none; background: linear-gradient(180deg, rgba(34, 8, 29, .55), rgba(20, 4, 15, .85));
box-shadow: 0 -1px 0 rgba(255, 208, 156, .5); }
.ms-sea::after { content: ""; position: absolute; left: 60%; width: 28%; top: 0; bottom: 0; background: repeating-linear-gradient(180deg, rgba(255, 200, 150, .7) 0 2px, rgba(255, 200, 150, 0) 2px 9px);
-webkit-mask: radial-gradient(50% 100% at 50% 0%, #000, transparent 80%); mask: radial-gradient(50% 100% at 50% 0%, #000, transparent 80%); opacity: var(--sun-o, 1); }
/* Tag 1: the photo, one sweep of scan light, the values, the counter */
.ms-photo { position: relative; overflow: hidden; margin-top: 12px; border-radius: 16px; aspect-ratio: 16 / 10; background: radial-gradient(120% 90% at 30% 20%, #F7EDE4, #E9D8CB 60%, #D9C2B2); }
.ms-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-scanline { position: absolute; left: 0; right: 0; top: 0; height: 36%; pointer-events: none; opacity: 0;
background: linear-gradient(180deg, rgba(255, 196, 142, 0), rgba(255, 196, 142, .55) 70%, #FFF3E6 96%, rgba(255, 255, 255, 0)); mix-blend-mode: screen; }
.ms-photo::after { content: ""; position: absolute; inset: 8px; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); -webkit-mask: linear-gradient(90deg, #000 18%, transparent 18% 82%, #000 82%), linear-gradient(#000 22%, transparent 22% 78%, #000 78%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, #000 18%, transparent 18% 82%, #000 82%) intersect, linear-gradient(#000 22%, transparent 22% 78%, #000 78%); }
@media (prefers-reduced-motion: no-preference) {
.ms-month .ms-scanline { animation: ms-scan 1.5s cubic-bezier(.45, 0, .2, 1) .5s both; }
.ms-month .ms-fr-1 .ms-chip { animation: ms-pop .6s var(--cm-ease) both; animation-delay: calc(1.9s + var(--i, 0) * .12s); }
.ms-month .ms-fr-1 .ms-meter i { animation: ms-grow 1s var(--cm-ease) 2.5s both; }
}
@keyframes ms-scan { 0% { opacity: 0; transform: translate3d(0, -60%, 0); } 12% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, 240%, 0); } }
@keyframes ms-pop { from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); } }
@keyframes ms-grow { from { transform: scaleX(0); } }
/* Tag 3: the program over four weeks fills day by day */
.ms-ask { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 600; font-size: 13px; line-height: 1.35;
background: var(--ms-mist); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ms-acc) 45%, transparent); }
.ms-ask::after { content: ""; width: 8px; height: 8px; flex: none; margin-left: auto; border-right: 2px solid var(--ms-acc); border-top: 2px solid var(--ms-acc); transform: rotate(45deg); }
.ms-weeks { display: grid; grid-template-columns: 26px repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 14px; font: 600 10.5px/1 Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 55%, transparent); text-align: center; }
.ms-weeks > span { display: grid; place-items: center; min-height: 14px; }
.ms-weeks i { display: block; height: 22px; border-radius: 7px; background: var(--ms-mist2); }
.ms-weeks i.is-t { background: var(--ms-grad); box-shadow: 0 4px 10px -5px rgba(184, 50, 95, .6); }
@media (prefers-reduced-motion: no-preference) {
.ms-month .ms-fr-2 .ms-ask { animation: ms-tap .9s var(--cm-ease) .4s both; }
.ms-month .ms-fr-2 .ms-weeks i.is-t { animation: ms-fill .5s var(--cm-ease) both; animation-delay: calc(1.1s + var(--i, 0) * .09s); }
}
@keyframes ms-tap { 0% { transform: scale(1); } 40% { transform: scale(.97); box-shadow: inset 0 0 0 1.5px var(--ms-acc), 0 0 0 8px var(--ms-tint); } 100% { transform: none; } }
@keyframes ms-fill { from { opacity: 0; transform: scale(.4); } }
/* Tag 12: a sentence is typed and turns into sets */
.ms-field { position: relative; margin-top: 6px; padding: 11px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ms-acc) 40%, transparent); font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.ms-typed { display: inline-block; vertical-align: bottom; overflow: hidden; }
.ms-caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -2px; background: var(--ms-acc); opacity: 0; }
.ms-sets { display: grid; gap: 5px; margin-top: 10px; }
.ms-set { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--ms-mist); font-size: 12.5px; }
.ms-set b { font-weight: 600; }
.ms-set span:first-child { font: 600 11px Inter, sans-serif; color: var(--ms-acc); }
.ms-set span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
.ms-month .ms-fr-3 .ms-typed { animation: ms-type 1.6s steps(28, end) .5s both; }
.ms-month .ms-fr-3 .ms-caret { animation: ms-blink .5s steps(1) .5s 5 both; }
.ms-month .ms-fr-3 .ms-btnx { animation: ms-press .5s var(--cm-ease) 2.3s both; }
.ms-month .ms-fr-3 .ms-set { animation: ms-pop .55s var(--cm-ease) both; animation-delay: calc(2.8s + var(--i, 0) * .15s); }
}
@keyframes ms-type { from { max-width: 0; } to { max-width: 100%; } }
@keyframes ms-blink { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ms-press { 40% { transform: scale(.95); filter: brightness(1.2); } }
/* Tag 30: the last 30 days as a warm line that runs on, dashed, into the sun */
.ms-chart { position: relative; margin-top: 12px; }
.ms-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms-chart .ln { fill: none; stroke: url(#msLineA); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ms-chart .fc { fill: none; stroke: #F2645C; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 2 7; opacity: .9; }
.ms-chart .ar { fill: url(#msAreaA); }
.ms-chart .gd { stroke: rgba(58, 24, 48, .08); stroke-width: 1; }
.ms-chart .sn { fill: #FFD09C; }
.ms-chart .sg { fill: url(#msSunA); }
.ms-chart-l { display: flex; justify-content: space-between; margin-top: 6px; font: 600 10.5px/1 Inter, sans-serif; letter-spacing: .04em; color: color-mix(in srgb, var(--ms-ink) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
.ms-month .ms-fr-4 .ln { stroke-dasharray: 100; animation: ms-draw 1.6s cubic-bezier(.65, 0, .35, 1) .4s both; }
.ms-month .ms-fr-4 .ar { animation: ms-to-one 1s ease 1.4s both; }
.ms-month .ms-fr-4 .fc { animation: ms-to-one .8s ease 2s both; }
.ms-month .ms-fr-4 .sg, .ms-month .ms-fr-4 .sn { animation: ms-rise-sun 1.2s var(--cm-ease) 2.4s both; transform-box: fill-box; transform-origin: 50% 50%; }
.ms-month .ms-fr-4 .ms-chip { animation: ms-pop .6s var(--cm-ease) both; animation-delay: calc(2.6s + var(--i, 0) * .12s); }
}
@keyframes ms-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes ms-rise-sun { from { opacity: 0; transform: scale(.4); } }
/* ==========================================================================
Free, coaches: Tageslicht cool
========================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* the three seats light one after another once the card has settled */
.ms-p-free.ms-coa .ms-hero .mcw-hero .mc-seats i { animation: ms-seat .7s var(--cm-ease) backwards; }
.ms-p-free.ms-coa .ms-hero .mcw-hero .mc-seats i:nth-child(1) { animation-delay: 1.25s; }
.ms-p-free.ms-coa .ms-hero .mcw-hero .mc-seats i:nth-child(2) { animation-delay: 1.55s; }
.ms-p-free.ms-coa .ms-hero .mcw-hero .mc-seats i:nth-child(3) { animation-delay: 1.85s; }
}
@keyframes ms-seat { 0% { opacity: .15; transform: scale(.5); box-shadow: none; } 55% { opacity: 1; transform: scale(1.5); box-shadow: 0 0 2cqw var(--ms-seat-glow, rgba(91, 93, 241, .9)); } 100% { opacity: .92; } }
/* "Dein Laden steht": a bento of ten tiles on the cool daylight stage */
.ms-shop { background: linear-gradient(180deg, #fff 0%, #F3F5FF 16%, #E9EDFF 64%, #fff 100%); }
.ms-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 14px;
grid-template-areas: "pin pin cal ev" "pin pin pak ev" "pay pay abo lnk" "ava ava kur mf"; }
.ms-tile-b { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 20px 20px 18px; border-radius: 26px;
background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .72)); box-shadow: 0 30px 60px -44px rgba(52, 52, 184, .45), inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 0 0 1.5px var(--ms-line);
-webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
.ms-tile-b h3 { font-size: 18px; line-height: 1.2; letter-spacing: -.015em; color: var(--ms-ink); text-wrap: balance; }
.ms-tile-b > p { font-size: 14px; line-height: 1.5; color: var(--dim); text-wrap: pretty; }
.ms-tile-b .ms-vis { margin-top: auto; }
.ms-b-pin { grid-area: pin; } .ms-b-cal { grid-area: cal; } .ms-b-ev { grid-area: ev; } .ms-b-pak { grid-area: pak; } .ms-b-pay { grid-area: pay; }
.ms-b-abo { grid-area: abo; } .ms-b-lnk { grid-area: lnk; } .ms-b-ava { grid-area: ava; } .ms-b-kur { grid-area: kur; } .ms-b-mf { grid-area: mf; }
/* the map with its 500 m circle */
.ms-map { position: relative; flex: 1; min-height: 240px; margin: 4px -4px -2px; border-radius: 20px; overflow: hidden;
background:
linear-gradient(28deg, transparent 47.5%, rgba(255, 255, 255, .95) 47.5% 50.5%, transparent 50.5%),
linear-gradient(-62deg, transparent 58%, rgba(255, 255, 255, .9) 58% 60%, transparent 60%),
linear-gradient(90deg, transparent 22%, rgba(255, 255, 255, .8) 22% 23.2%, transparent 23.2% 71%, rgba(255, 255, 255, .8) 71% 72.2%, transparent 72.2%),
linear-gradient(0deg, transparent 30%, rgba(255, 255, 255, .8) 30% 31.4%, transparent 31.4% 76%, rgba(255, 255, 255, .8) 76% 77.4%, transparent 77.4%),
radial-gradient(28% 22% at 84% 18%, #CDEFD9, #CDEFD9 60%, transparent 62%),
radial-gradient(60% 30% at 10% 104%, #BFE3FF, #BFE3FF 58%, transparent 60%),
linear-gradient(160deg, #EEF0FA, #E3E7F7); }
.ms-map::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(closest-side, rgba(91, 93, 241, .2), rgba(91, 93, 241, .1)); box-shadow: inset 0 0 0 2px rgba(91, 93, 241, .55); }
.ms-map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -80%) rotate(-45deg); border-radius: 50% 50% 50% 0; background: var(--c-arrow);
box-shadow: 0 8px 16px -6px rgba(52, 52, 184, .7), inset 0 0 0 5px rgba(255, 255, 255, .0); }
.ms-map-card { position: absolute; left: 14px; bottom: 14px; right: 14px; display: flex; align-items: center; gap: 10px; max-width: 290px; padding: 10px 12px; border-radius: 16px;
background: rgba(255, 255, 255, .92); box-shadow: 0 16px 30px -18px rgba(20, 22, 69, .5); font-size: 12.5px; line-height: 1.35; color: var(--ms-ink); }
.ms-map-card b { display: block; font-weight: 600; font-size: 13.5px; }
.ms-av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; font: 600 12.5px Inter, sans-serif; color: #fff; background: var(--c-arrow); }
.ms-map-r { position: absolute; right: 14px; top: 14px; padding: 5px 9px; border-radius: 999px; font: 600 11px Inter, sans-serif; color: var(--c-accent); background: rgba(255, 255, 255, .88); }
.ms-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 8px; border-radius: 999px; font: 600 10.5px/1.2 Inter, sans-serif; color: #065F46; background: #D1FAE5; white-space: nowrap; }
/* the small visuals of the other tiles */
.ms-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; font: 600 10px/1 Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 55%, transparent); text-align: center; }
.ms-cal i { display: block; height: 30px; border-radius: 7px; background: var(--ms-mist2); }
.ms-cal i.is-b { background: var(--c-arrow); box-shadow: 0 6px 12px -8px rgba(52, 52, 184, .8); }
.ms-cal i.is-q { background: repeating-linear-gradient(135deg, var(--ms-mist2) 0 4px, #fff 4px 8px); box-shadow: inset 0 0 0 1.5px rgba(91, 93, 241, .4); }
.ms-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-pills .ms-chip { background: var(--ms-mist2); }
.ms-pills .ms-chip.is-ok { color: #065F46; background: #D1FAE5; }
.ms-credits { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.ms-credits i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--ms-mist2); }
.ms-credits i.is-u { background: var(--c-arrow); }
.ms-flyer { position: relative; display: grid; gap: 8px; align-content: space-between; min-height: 200px; padding: 14px; border-radius: 16px; color: #fff; overflow: hidden;
background: radial-gradient(80% 60% at 90% 0%, rgba(127, 214, 255, .6), rgba(127, 214, 255, 0) 70%), linear-gradient(160deg, #2B2DA6, #16175E); }
.ms-flyer b { font: 600 20px/1.05 Outfit, Inter, sans-serif; letter-spacing: -.02em; }
.ms-flyer span { font-size: 12px; color: rgba(255, 255, 255, .8); }
.ms-qr { width: 64px; height: 64px; padding: 5px; border-radius: 8px; background: #fff; }
.ms-qr i { display: block; width: 100%; height: 100%;
background:
linear-gradient(#141645, #141645) 0 0 / 30% 30% no-repeat, linear-gradient(#141645, #141645) 100% 0 / 30% 30% no-repeat, linear-gradient(#141645, #141645) 0 100% / 30% 30% no-repeat,
repeating-conic-gradient(#141645 0 25%, #fff 0 50%) 50% 50% / 18% 18%; box-shadow: inset 0 0 0 0 #fff; }
.ms-lesson { display: grid; gap: 5px; }
.ms-lesson span { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--ms-mist); font-size: 12px; font-weight: 500; color: var(--ms-ink); }
.ms-lesson span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ms-acc); opacity: .6; }
.ms-lesson .is-free { color: var(--c-accent); }
.ms-bub { align-self: flex-start; max-width: 100%; padding: 10px 13px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line); font-size: 13px; line-height: 1.45; color: var(--ms-ink); }
.ms-bub.is-me { align-self: flex-end; border-radius: 16px 16px 5px 16px; color: #fff; background: var(--ms-ink); box-shadow: none; }
.ms-bub-row { display: flex; flex-direction: column; gap: 8px; }
.ms-confirm { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 13px; border-radius: 14px; background: var(--ms-mist); box-shadow: inset 0 0 0 1.5px rgba(91, 93, 241, .35); font-size: 12.5px; color: var(--ms-ink); }
.ms-confirm .ms-btnx { margin: 0; min-height: 30px; }
.ms-ring { display: flex; align-items: center; gap: 12px; }
.ms-ring svg { width: 64px; height: 64px; flex: none; }
.ms-ring span { font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.ms-ring b { display: block; font: 600 20px/1.1 Outfit, Inter, sans-serif; color: var(--ms-ink); }
.ms-stripe { display: grid; gap: 6px; }
.ms-stripe .ms-row2 { padding: 9px 12px; border-radius: 12px; background: var(--ms-mist); font-size: 12.5px; color: var(--ms-ink); }
.ms-stripe .ms-row2 b { font-weight: 600; }
@media (max-width: 1099px) {
.ms-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; grid-template-areas: "pin pin" "cal ev" "pak ev" "pay pay" "abo lnk" "ava ava" "kur mf"; }
}
@media (max-width: 600px) {
.ms-bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pin" "cal" "pay" "pak" "abo" "lnk" "ev" "kur" "ava" "mf"; }
.ms-map { min-height: 220px; }
}
/* ==========================================================================
Pro: Blaue Stunde
========================================================================== */
/* the fifteen seats light one after another once the card has settled, each with a cyan glow */
@media (prefers-reduced-motion: no-preference) {
.ms-p-pro .ms-hero .mcw-hero .mc-seats i { --ms-seat-glow: rgba(127, 214, 255, .95); animation: ms-seat .7s var(--cm-ease) backwards; animation-delay: calc(1.3s + var(--s, 0) * 60ms); }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(2) { --s: 1; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(3) { --s: 2; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(4) { --s: 3; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(5) { --s: 4; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(6) { --s: 5; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(7) { --s: 6; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(8) { --s: 7; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(9) { --s: 8; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(10) { --s: 9; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(11) { --s: 10; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(12) { --s: 11; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(13) { --s: 12; }
.ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(14) { --s: 13; } .ms-p-pro .ms-hero .mcw-hero .mc-seats i:nth-child(15) { --s: 14; }
/* the beams follow the pointer a little; a band of window light sweeps the satin once, then every 9 s */
.ms-p-pro .ms-hero .mcw-hero .mc-beam { transform: translate3d(calc((var(--mx, 50%) - 50%) * .35), 0, 0); transition: transform .9s var(--ease); }
.ms-p-pro .ms-hero .mcw-hero .mc-beam::after { content: ""; position: absolute; inset: -20% -50%; pointer-events: none; opacity: 0;
background: linear-gradient(112deg, rgba(255, 255, 255, 0) 42%, rgba(210, 240, 255, .34) 49%, rgba(255, 255, 255, .5) 50%, rgba(210, 240, 255, .34) 51%, rgba(255, 255, 255, 0) 58%);
animation: ms-sweep 9s cubic-bezier(.45, 0, .25, 1) 2.4s infinite; }
}
@keyframes ms-sweep { 0% { opacity: 0; transform: translate3d(-42%, 0, 0); } 3% { opacity: 1; } 19% { opacity: 1; } 22% { opacity: 0; transform: translate3d(42%, 0, 0); } 100% { opacity: 0; transform: translate3d(42%, 0, 0); } }
.ms-hero.is-off *, .ms-hero.is-off *::before, .ms-hero.is-off *::after, .ms-hero.is-off::before { animation-play-state: paused !important; }
/* the row of fifteen seats in "Bis 15 aktive Athleten": it fills as it scrolls through */
.ms-seatrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(135deg, #16175E, #2B2DA6); view-timeline: --msSeats block; }
.ms-seatrow i { width: 16px; height: 16px; border-radius: 50%; background: #E8F7FF; box-shadow: 0 0 10px rgba(127, 214, 255, .7); }
.ms-seatrow span { margin-left: auto; font: 600 12.5px Inter, sans-serif; color: rgba(255, 255, 255, .8); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ms-seatrow i { animation: ms-seat-fill linear both; animation-timeline: --msSeats; }
.ms-seatrow i:nth-child(1) { animation-range: entry 40% cover 22%; } .ms-seatrow i:nth-child(2) { animation-range: entry 50% cover 24%; }
.ms-seatrow i:nth-child(3) { animation-range: entry 60% cover 26%; } .ms-seatrow i:nth-child(4) { animation-range: entry 70% cover 28%; }
.ms-seatrow i:nth-child(5) { animation-range: entry 80% cover 30%; } .ms-seatrow i:nth-child(6) { animation-range: entry 90% cover 32%; }
.ms-seatrow i:nth-child(7) { animation-range: cover 10% cover 34%; } .ms-seatrow i:nth-child(8) { animation-range: cover 12% cover 36%; }
.ms-seatrow i:nth-child(9) { animation-range: cover 14% cover 38%; } .ms-seatrow i:nth-child(10) { animation-range: cover 16% cover 40%; }
.ms-seatrow i:nth-child(11) { animation-range: cover 18% cover 42%; } .ms-seatrow i:nth-child(12) { animation-range: cover 20% cover 44%; }
.ms-seatrow i:nth-child(13) { animation-range: cover 22% cover 46%; } .ms-seatrow i:nth-child(14) { animation-range: cover 24% cover 48%; }
.ms-seatrow i:nth-child(15) { animation-range: cover 26% cover 50%; }
}
}
@keyframes ms-seat-fill { from { opacity: .2; transform: scale(.6); box-shadow: none; } }
/* "Montagmorgen": three frames, the light moves from blue hour to a clear morning */
.ms-monday .ms-step:nth-child(1) .ms-frame { --sky: linear-gradient(170deg, #05061C 0%, #0E1050 42%, #1E2090 100%); }
.ms-monday .ms-step:nth-child(2) .ms-frame { --sky: linear-gradient(170deg, #0E1050 0%, #2B2DA6 50%, #4446DA 100%); }
.ms-monday .ms-step:nth-child(3) .ms-frame { --sky: linear-gradient(170deg, #2B2DA6 0%, #5B5DF1 38%, #8C94FF 70%, #C7E9FF 100%); }
.ms-monday .ms-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(200, 236, 255, .16) 60%, rgba(255, 255, 255, 0) 70%), linear-gradient(118deg, rgba(255, 255, 255, 0) 72%, rgba(200, 236, 255, .1) 77%, rgba(255, 255, 255, 0) 83%),
radial-gradient(60% 50% at 100% 0%, rgba(127, 214, 255, .35), rgba(127, 214, 255, 0) 70%); }
.ms-monday .ms-step-k, .ms-fee-show .ms-step-k { color: var(--c-accent-dark); }
/* 1: the briefing; five rows arrive in any order and sort into Ava's ranking */
.ms-brief { position: relative; height: calc(5 * 48px + 4 * 6px); margin-top: 12px; }
.ms-brief li { --y: calc(var(--r) * 54px); position: absolute; left: 0; right: 0; top: 0; height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 10px;
border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--ms-line), 0 8px 18px -14px rgba(20, 22, 69, .5); transform: translate3d(0, var(--y), 0); list-style: none; }
.ms-brief ol { margin: 0; padding: 0; }
.ms-brief .ms-av { width: 30px; height: 30px; font-size: 11px; }
.ms-brief p { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12px; line-height: 1.25; color: var(--ms-ink); }
.ms-brief p::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--dot, #FFB86B); }
.ms-brief .is-cheer { --dot: #3CC6F0; }
.ms-brief p span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (prefers-reduced-motion: no-preference) {
.ms-monday .ms-fr-1 .ms-brief li { animation: ms-rank 2.4s cubic-bezier(.65, 0, .25, 1) both; animation-delay: calc(.3s + var(--a) * .12s); }
.ms-monday .ms-fr-1 .ms-btnx { animation: ms-press .5s var(--cm-ease) .1s both; }
}
@keyframes ms-rank {
0% { opacity: 0; transform: translate3d(0, calc(var(--a) * 54px + 10px), 0); }
18% { opacity: 1; transform: translate3d(0, calc(var(--a) * 54px), 0); }
55% { opacity: 1; transform: translate3d(0, calc(var(--a) * 54px), 0); }
100% { opacity: 1; transform: translate3d(0, var(--y), 0); }
}
/* 2: the questions flip by, then six weeks fill one after another */
.ms-qs { position: relative; height: 46px; margin-top: 10px; perspective: 600px; }
.ms-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px; border-radius: 13px; background: var(--ms-mist); box-shadow: inset 0 0 0 1px var(--ms-line);
font-size: 12.5px; color: color-mix(in srgb, var(--ms-ink) 70%, transparent); backface-visibility: hidden; }
.ms-q b { font-weight: 600; color: var(--ms-ink); }
.ms-q:not(:last-child) { opacity: 0; }
.ms-grid6 { display: grid; grid-template-columns: 22px repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 12px; font: 600 10px/1 Inter, sans-serif; color: color-mix(in srgb, var(--ms-ink) 55%, transparent); }
.ms-grid6 > span { display: grid; place-items: center; min-height: 12px; }
.ms-grid6 i { display: block; height: 14px; border-radius: 5px; background: var(--ms-mist2); }
.ms-grid6 i.is-t { background: var(--c-arrow); }
.ms-go-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-go-row .ms-btnx { margin-top: 10px; }
@media (prefers-reduced-motion: no-preference) {
.ms-monday .ms-fr-2 .ms-q { animation: ms-flip 2.4s var(--cm-ease) both; animation-delay: calc(.3s + var(--q) * .55s); }
.ms-monday .ms-fr-2 .ms-q:last-child { animation-name: ms-flip-last; }
.ms-monday .ms-fr-2 .ms-btnx.is-ai { animation: ms-press .6s var(--cm-ease) 2.6s both; }
.ms-monday .ms-fr-2 .ms-wk > * { animation: ms-pop .5s var(--cm-ease) both; animation-delay: calc(3s + var(--w) * .22s); }
.ms-monday .ms-fr-2 .ms-btnx.is-ok { animation: ms-pop .6s var(--cm-ease) 4.5s both; }
}
.ms-wk { display: contents; }
@keyframes ms-flip { 0% { opacity: 0; transform: rotateX(-80deg); } 8% { opacity: 1; transform: none; } 20% { opacity: 1; transform: none; } 28%, 100% { opacity: 0; transform: rotateX(80deg); } }
@keyframes ms-flip-last { 0% { opacity: 0; transform: rotateX(-80deg); } 8%, 100% { opacity: 1; transform: none; } }
/* 3: the fee ticks from 5 % to 2,5 %, the ring shows the seats in use */
.ms-tick { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.ms-tick-n { position: relative; display: inline-grid; height: 1.05em; overflow: hidden; font: 600 46px/1.05 Outfit, Inter, sans-serif; letter-spacing: -.03em; color: var(--ms-ink); }
.ms-tick-n span { grid-area: 1 / 1; white-space: nowrap; }
.ms-tick-n span:first-child { transform: translate3d(0, -110%, 0); opacity: 0; }
.ms-tick small { font-size: 13px; color: var(--dim); }
.ms-seatring { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: var(--ms-mist); }
.ms-seatring svg { width: 78px; height: 78px; flex: none; transform: rotate(-90deg); }
.ms-seatring circle { fill: none; stroke-width: 4.2; stroke-linecap: round; }
.ms-seatring .bg { stroke: rgba(68, 71, 216, .12); }
.ms-seatring .fg { stroke: url(#msRingC); stroke-dasharray: 80 100; }
.ms-seatring b { display: block; font: 600 22px/1.1 Outfit, Inter, sans-serif; color: var(--ms-ink); }
.ms-seatring span { font-size: 12.5px; color: var(--dim); }
@media (prefers-reduced-motion: no-preference) {
.ms-monday .ms-fr-3 .ms-tick-n span:first-child { animation: ms-tick-in .7s var(--cm-ease) 1s both; }
.ms-monday .ms-fr-3 .ms-tick-n span:last-child { animation: ms-tick-out .7s var(--cm-ease) 1s both; }
.ms-monday .ms-fr-3 .ms-seatring .fg { animation: ms-ring 1.6s var(--cm-ease) 1.5s both; }
}
@keyframes ms-tick-in { from { transform: translate3d(0, 110%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ms-tick-out { from { transform: none; opacity: 1; } to { transform: translate3d(0, -110%, 0); opacity: 0; } }
@keyframes ms-ring { from { stroke-dasharray: 0 100; } }
/* the final state of the tick without motion: the new fee stands */
.ms-tick-n span:first-child { transform: none; opacity: 1; }
.ms-tick-n span:last-child { transform: translate3d(0, -110%, 0); opacity: 0; }
/* ==========================================================================
Elite: Sternennacht
========================================================================== */
/* the wide aurora over the night stage, continuing the card's */
.ms-p-elite .ms-hero::before { content: ""; position: absolute; left: -20%; right: -20%; top: -10%; height: 70%; z-index: -1; pointer-events: none; filter: blur(34px); transform: rotate(-9deg);
background: radial-gradient(40% 26% at 64% 44%, rgba(127, 214, 255, .26), rgba(127, 214, 255, 0) 70%), radial-gradient(34% 22% at 40% 56%, rgba(150, 120, 255, .26), rgba(150, 120, 255, 0) 70%),
radial-gradient(26% 16% at 84% 34%, rgba(110, 240, 220, .14), rgba(110, 240, 220, 0) 70%); }
.ms-p-elite .ms-hero .mcw-hero .mc-motif::before, .ms-p-elite .ms-hero .mcw-hero .mc-motif::after, .ms-p-elite .ms-hero .mcw-hero .mc-rim::before {
content: ""; position: absolute; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; pointer-events: none; opacity: 0;
background: radial-gradient(circle, #fff 0 7%, rgba(210, 236, 255, .7) 12%, rgba(210, 236, 255, 0) 36%),
linear-gradient(90deg, rgba(220, 240, 255, 0) 46%, rgba(220, 240, 255, .8) 50%, rgba(220, 240, 255, 0) 54%),
linear-gradient(0deg, rgba(220, 240, 255, 0) 46%, rgba(220, 240, 255, .8) 50%, rgba(220, 240, 255, 0) 54%); }
.ms-p-elite .ms-hero .mcw-hero .mc-motif::before { left: 28%; top: 12%; }
.ms-p-elite .ms-hero .mcw-hero .mc-motif::after { left: 69%; top: 44%; }
.ms-p-elite .ms-hero .mcw-hero .mc-rim::before { left: 90%; top: 10%; }
@media (prefers-reduced-motion: no-preference) {
.ms-p-elite .ms-hero .mcw-hero .mc-aurora { animation: ms-drift 14s ease-in-out infinite alternate; }
.ms-p-elite .ms-hero::before { animation: ms-drift-wide 18s ease-in-out infinite alternate; }
.ms-p-elite .ms-hero .mcw-hero .mc-motif::before { animation: ms-twinkle 4.8s ease-in-out 1.6s infinite; }
.ms-p-elite .ms-hero .mcw-hero .mc-motif::after { animation: ms-twinkle 4.8s ease-in-out 3.2s infinite; }
.ms-p-elite .ms-hero .mcw-hero .mc-rim::before { animation: ms-twinkle 4.8s ease-in-out 4.8s infinite; }
.ms-p-elite .ms-hero .mcw-hero .mc-inf path { stroke-dasharray: 100 100; animation: ms-draw 2.2s cubic-bezier(.65, 0, .35, 1) 1.1s backwards; }
}
@keyframes ms-drift { from { transform: translate3d(-6%, 0, 0) rotate(-9deg); } to { transform: translate3d(6%, 0, 0) rotate(-9deg); } }
@keyframes ms-drift-wide { from { transform: translate3d(-5%, 0, 0) rotate(-9deg); } to { transform: translate3d(5%, 2%, 0) rotate(-9deg); } }
@keyframes ms-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 12% { opacity: 1; transform: scale(1) rotate(25deg); } 26% { opacity: 0; transform: scale(.5) rotate(45deg); } }
/* the large infinity in "Unbegrenzt aktive Athleten": it traces itself as it scrolls through */
.ms-inf-big { display: grid; place-items: center; margin-top: 16px; padding: 22px; border-radius: 20px; background: radial-gradient(70% 70% at 50% 40%, #1A1E66, #05061C); view-timeline: --msInf block; }
.ms-inf-big svg { width: min(280px, 70%); height: auto; overflow: visible; }
.ms-inf-big path { fill: none; stroke: url(#msInfG); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(143, 227, 255, .55)); }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.ms-inf-big path { stroke-dasharray: 100 100; animation: ms-draw linear both; animation-timeline: --msInf; animation-range: entry 60% cover 55%; }
}
}
/* "Die Gebühr verschwindet": one 60 EUR payment, the Fitiva part shrinks through the plans */
.ms-fee-show .ms-fs { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 88px; align-items: start; }
.ms-fs-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.ms-fs-step h3 { margin-top: 10px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.14; letter-spacing: -.025em; color: #fff; text-wrap: balance; }
.ms-fs-step p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ms-on); text-wrap: pretty; }
.ms-fs-stage { position: relative; display: grid; gap: 16px; min-width: 0; }
.ms-fs-card { position: relative; padding: 26px 26px 22px; border-radius: 30px; background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 50px 90px -50px rgba(0, 0, 0, .8);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ms-fs-card .ms-demo { margin-bottom: 16px; }
.ms-fs-card .ms-bars { margin: 0; padding: 0; background: none; box-shadow: none; gap: 20px; }
.ms-fs-card .ms-bars-k { color: rgba(255, 255, 255, .64); }
.ms-fs-card .ms-bars-k .tag-demo { color: rgba(255, 255, 255, .64); }
.ms-fs-card .ms-bar-h, .ms-fs-card .ms-bar-legend { color: rgba(255, 255, 255, .72); }
.ms-fs-card .ms-bar-h > b, .ms-fs-card .ms-bar-h span b { color: #fff; }
.ms-fs-card .ms-bar-track { background: rgba(255, 255, 255, .08); }
.ms-fs-card .ms-bar-keep { background: linear-gradient(90deg, #6C74FF, #8FE3FF 70%, #E8F7FF); }
.ms-fs-card .ms-bar-fee { background: repeating-linear-gradient(135deg, #C3B5FF 0 6px, #8C94FF 6px 12px); }
.ms-fs-card .ms-bar-card { background: rgba(255, 255, 255, .34); }
.ms-fs-card .ms-bar-legend .is-fee::before { background: #A99CFF; }
.ms-fs-card .ms-bar-legend .is-card::before { background: rgba(255, 255, 255, .5); }
.ms-fs-card .cp-table { display: none; }
.ms-fs-note { margin-top: 16px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .64); }
.ms-fs.is-live .ms-fs-note { display: none; }
.ms-fs-cap { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; line-height: 1.55; color: var(--ms-on); text-wrap: pretty; }
@media (max-width: 760px) { .ms-fs.is-live .ms-fs-cap { display: block; } }
/* the live bar content.js builds from the three: keep, card fee, Fitiva fee, all moved by transform */
.ms-fs-live { display: none; }
.ms-fs.is-live .ms-fs-card .ms-bars { display: none; }
.ms-fs.is-live .ms-fs-live { display: block; }
.ms-fs-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ms-fs-plan { font: 600 26px/1 Outfit, Inter, sans-serif; letter-spacing: -.02em; color: #fff; }
.ms-fs-keep { display: grid; justify-items: end; gap: 6px; }
.ms-fs-keep small { font: 600 11.5px/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.ms-fs-keep b { font: 600 clamp(38px, 4.4vw, 56px)/1 Outfit, Inter, sans-serif; letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums; }
.ms-fs-track { position: relative; height: 54px; margin-top: 18px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.ms-fs-track i { position: absolute; inset: 0; transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.65, 0, .25, 1); }
.ms-fs-track .k { background: linear-gradient(90deg, #4447D8, #6C74FF 45%, #8FE3FF 85%, #E8F7FF); transform: scaleX(var(--k)); }
.ms-fs-track .c { background: rgba(255, 255, 255, .42); transform: translate3d(calc(var(--k) * 100%), 0, 0) scaleX(var(--c)); }
.ms-fs-track .f { background: repeating-linear-gradient(135deg, #C3B5FF 0 6px, #8C94FF 6px 12px); transform: translate3d(calc((var(--k) + var(--c)) * 100%), 0, 0) scaleX(var(--f)); }
.ms-fs-track .g { width: 3px; left: -1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)); box-shadow: 0 0 16px 4px rgba(143, 227, 255, .8);
transform: translate3d(calc((var(--k) + var(--c)) * 100cqw), 0, 0); opacity: 0; transition: opacity .3s; }
.ms-fs-track { container-type: inline-size; }
.ms-fs.is-zero .ms-fs-track .g { animation: ms-glint 1.4s ease 1s both; }
/* the end of the bar, enlarged: a funnel from the bar's last sixth down to a second track */
.ms-fs-zoom { margin-top: 10px; }
.ms-fs-zoom::before { content: ""; display: block; height: 22px; background: linear-gradient(180deg, rgba(143, 227, 255, .16), rgba(143, 227, 255, .03)); clip-path: polygon(83.33% 0, 100% 0, 100% 100%, 0 100%); }
.ms-fs-track.is-zoom { height: 36px; margin-top: 0; border-radius: 12px; }
.ms-fs-zl { margin-top: 8px; font-size: 12.5px; color: rgba(255, 255, 255, .56); }
@keyframes ms-glint { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.ms-fs-leg { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.ms-fs-leg span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; background: rgba(255, 255, 255, .5); }
.ms-fs-leg .is-fee::before { background: #A99CFF; }
.ms-fs-leg .is-keep::before { background: #8FE3FF; }
.ms-fs-leg b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
/* the three plans as a segmented control (phones, and wherever the story does not run) */
.ms-seg { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.ms-fs.is-live:not(.is-story) .ms-seg { display: grid; }
.ms-seg button { min-height: 40px; border-radius: 999px; font: 600 14px Inter, sans-serif; color: rgba(255, 255, 255, .78); transition: background-color .3s, color .3s; }
.ms-seg button[aria-pressed="true"] { background: #fff; color: var(--ms-ink); }
.ms-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ms-fs-vals { display: none; margin: 14px 0 0; padding: 0; list-style: none; gap: 6px; }
.ms-fs-vals li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: rgba(255, 255, 255, .72); }
.ms-fs-vals b { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .ms-fs.is-live .ms-fs-vals { display: grid; } }
/* desktop with motion: the steps scroll, the card stands */
@media (min-width: 1100px) {
.ms-fs.is-story .ms-fs-step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .6s var(--cm-ease); }
.ms-fs.is-story .ms-fs-step.is-on { opacity: 1; }
.ms-fs.is-story .ms-fs-stage { position: sticky; top: max(110px, calc(50vh - 200px)); }
}
/* the CSV for the tax advisor: rows stream into the table */
.ms-csv { margin-top: 64px; }
.ms-csv-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.ms-csv-h h3 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.025em; color: #fff; }
.ms-csv-h p { max-width: 520px; margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ms-on); }
.ms-csv-f { margin-top: 20px; border-radius: 22px; overflow-x: auto; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); scrollbar-width: thin; overscroll-behavior-x: contain; }
.ms-csv-f table { width: 100%; min-width: 1060px; border-collapse: collapse; font: 500 13px/1.3 Inter, sans-serif; color: rgba(255, 255, 255, .86); font-variant-numeric: tabular-nums; }
/* the note under the sample sits outside the sideways scroll, so a phone reads it whole */
.ms-csv-cap { margin: 12px 4px 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); text-wrap: pretty; }
.ms-csv-cap b { color: rgba(255, 255, 255, .86); font-weight: 600; }
.ms-csv-f th { padding: 13px 14px; text-align: left; font: 600 11.5px/1.2 Inter, sans-serif; letter-spacing: .04em; color: #B5ECFF; border-bottom: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; }
.ms-csv-f td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; }
.ms-csv-f td.num, .ms-csv-f th.num { text-align: right; }
.ms-csv-f tr.is-zero td.z { color: #8FE3FF; }
@media (prefers-reduced-motion: no-preference) {
.ms-csv.is-armed tbody tr { opacity: 0; transform: translate3d(0, 12px, 0); }
.ms-csv.is-in tbody tr { opacity: 1; transform: none; transition: opacity .6s var(--cm-ease), transform .8s var(--cm-ease); transition-delay: calc(var(--i, 0) * .16s); }
}
@media (max-width: 1099px) {
.ms-fee-show .ms-fs { grid-template-columns: minmax(0, 1fr); }
.ms-fs-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ms-fs-step h3 { font-size: 20px; }
.ms-fs-step p { font-size: 15px; }
}
@media (max-width: 760px) {
.ms-fs-steps { grid-template-columns: minmax(0, 1fr); }
.ms-fs.is-live .ms-fs-steps { display: none; }
.ms-fs-card { padding: 20px 16px 18px; border-radius: 24px; }
.ms-fs-track { height: 44px; }
}
/* ---- print and forced colours */
@media print {
.ms-story { display: block; }
.ms-frame, .ms-fs-live, .ms-seg { display: none; }
}
@media (forced-colors: active) {
.ms-frame, .ms-tile-b, .ms-taste, .ms-note-c, .ms-fs-card { border: 1px solid CanvasText; }
.ms-seg button[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}
/* <<< Membership pages */
/* press: the "more material on request" card right under the downloads (Leon 2026-09-28) */
.cp-more-mat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 36px; max-width: 980px; margin: 22px auto 0; }
.cp-more-mat p { max-width: 58ch; }
@media (max-width: 700px) { .cp-more-mat { grid-template-columns: minmax(0, 1fr); } .cp-more-mat .btn { justify-self: start; } }
/* ==========================================================================
Country pages (t-country: /deutschland/, /oesterreich/, /schweiz/; Leon
2026-09-28, for search and for the people of the three start countries).
Under the head each page has its own scene: Switzerland a peak at sunrise
whose ridges drift in parallax, Austria a ridge line whose trail draws
itself while you scroll, Germany a pitch whose lines draw themselves under
floodlights. Inline SVG, one layer per