* (no data-testid — we match by position inside event-meta) * - apps/web/modules/bookings/components/event-meta/Details.tsx * EventMetaBlock wrapper: first-level flex children of event-meta * (icon + text), rendered as .text-sm rows * Only font-size / line-height / font-weight changes; no decorations. * ========================================================================= */ /* Host name ("Rechtsanwältin Julia Mut") — first

inside event-meta. Cal.com uses .text-subtle + .text-sm + .font-semibold; we only enlarge. */ [data-testid="event-meta"] > p.text-subtle { font-size: 1.25rem !important; /* 20 px mobile */ line-height: 1.35 !important; font-weight: 600 !important; color: var(--sm-c-text) !important; } @media (min-width: 768px) { [data-testid="event-meta"] > p.text-subtle { font-size: 1.375rem !important; /* 22 px desktop */ } } /* Event title ("Telefonische Erstberatung") — Cal.com uses .text-xl = 20 px. Bump to 24 / 28 for the hero line. */ h1[data-testid="event-title"] { font-size: 1.5rem !important; /* 24 px mobile */ line-height: 1.25 !important; font-weight: 700 !important; } @media (min-width: 768px) { h1[data-testid="event-title"] { font-size: 1.75rem !important; /* 28 px desktop */ } } /* Description block + "Kosten & Vorbereitung" markdown content. EventMetaBlock renders as a flex container; the text lives in its inner

(contentClassName="mb-8"). */ [data-testid="event-meta-description"], [data-testid="event-meta-description"] p, [data-testid="event-meta-description"] li { font-size: 1rem !important; /* 16 px */ line-height: 1.55 !important; color: var(--sm-c-text) !important; } @media (min-width: 768px) { [data-testid="event-meta-description"], [data-testid="event-meta-description"] p, [data-testid="event-meta-description"] li { font-size: 1rem !important; /* 16 px — Julia: -1 pt (match mobile) */ } } /* Section headers inside description. description in DB uses ... on its own line as a visual h2 (Cal.com inlines plain text →

...
; we override to render as a block-level header). */ [data-testid="event-meta-description"] strong { display: block; font-size: 1.125rem !important; /* 18 px mobile */ line-height: 1.35 !important; font-weight: 700 !important; color: var(--sm-c-text) !important; margin: 1.1rem 0 0.35rem 0 !important; letter-spacing: -0.005em; } [data-testid="event-meta-description"] > p:first-child > strong:first-child, [data-testid="event-meta-description"] > strong:first-child { margin-top: 0 !important; } @media (min-width: 768px) { [data-testid="event-meta-description"] strong { font-size: 1.2rem !important; /* 19.2 px desktop */ } } /* Description scroll container: +30% height per Julia. Cal.com sets .max-h-[180px] via Tailwind arbitrary value; override 180 → 234. */ [data-testid="event-meta-description"] [class*="max-h-[180px]"], [data-testid="event-meta-description"] .overflow-y-auto { max-height: 234px !important; } /* Booker card shadow — lift the white block off the gray page background. */ body > main > div > div { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; } /* Time-slot column date header: "Mittwoch, 6. Mai". Cal.com wraps the day-number in ; uniform 18 px / weight 600 matches the weekday, kills the rounded pill. */ header > span > span:first-child, header > span > span:nth-child(2), header span.rounded-3xl { font-size: 1.125rem !important; line-height: 1.5 !important; font-weight: 600 !important; } header span.rounded-3xl { padding: 0 !important; border-radius: 0 !important; background: transparent !important; min-width: 0 !important; min-height: 0 !important; color: inherit !important; display: inline !important; } /* Icon-label rows: "30 Min" (duration), "Telefonnummer" (location), timezone row. They are direct flex children of event-meta with .text-sm. Scope narrowly so nothing else is affected. */ [data-testid="event-meta"] .text-sm, [data-testid="event-meta-current-timezone"], [data-testid="event-meta-current-timezone"] * { font-size: 0.9375rem !important; /* 15 px floor */ line-height: 1.45 !important; } /* ========================================================================= * Calendar (DatePicker) — Calendly-style blue highlights. * Source: packages/features/calendars/components/DatePicker.tsx * day cells: [data-testid="day"] * selected: adds class .bg-brand-default * today: inner dot * disabled: data-disabled="true" * nav: [data-testid="decrementMonth" | "incrementMonth"] * Cal.com's brand color default is dark/gray; we override to #006bff. * ========================================================================= */ /* Selected day — solid blue circle, white text */ [data-testid="day"].bg-brand-default { background-color: var(--sm-c-primary) !important; color: #fff !important; } [data-testid="day"].bg-brand-default:hover { background-color: var(--sm-c-primary-hover) !important; } /* "Today" indicator dot (inner span with .bg-brand-default) — 2× larger, and on mobile nudged 1 px down so it doesn't crowd the day number. */ [data-testid="day"] span.bg-brand-default { background-color: var(--sm-c-primary) !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; } @media (max-width: 767px) { [data-testid="day"] span.bg-brand-default { margin-top: 1px !important; } } /* Next-month label shown under the first day of the following month (e.g. "MAY" under "1" when the current month's grid spills into the next). Target: the second direct child

inside a calendar cell (the first child is the day