/* Breathe Circle: deliberate motion, calm surfaces and immediate feedback.
   Based on Emil Kowalski's emil-design-eng guidance; branding stays local. */
:root {
  --bc-ease-out: cubic-bezier(.23, 1, .32, 1);
  --bc-ease-move: cubic-bezier(.77, 0, .175, 1);
  --bc-border: rgba(214, 183, 124, .24);
  --bc-radius: 16px;
}
html { scrollbar-gutter: stable; }
body { text-rendering: optimizeLegibility; }
::selection { color: #17170f; background: #e2c88f; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, figcaption) { text-wrap: pretty; }
:where(button, a, summary) { touch-action: manipulation; }
:where(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid #eed49d;
  outline-offset: 4px;
}
:where(input, select, textarea) { accent-color: #c9a962; }
:where(button, .button, .text-link, .riecher-button, .training-circle, .breathe-test-answer) {
  transition: transform 160ms var(--bc-ease-out), background-color 160ms ease,
    border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}
:where(button, .button, .riecher-button, .training-circle, .breathe-test-answer):not(:disabled):not([aria-disabled="true"]):active {
  scale: .97;
}
:where(button, .button, .riecher-button, .training-circle, .breathe-test-answer) {
  transition-property: transform, scale, background-color, border-color, color, opacity;
}
:where(button, .button)[aria-disabled="true"], button:disabled { cursor: default; }
.button { border-radius: 12px; letter-spacing: .3px; text-transform: none; font-size: 14px; }
.button, .riecher-button, .breathe-test-start, .breathe-test-answer, .training-circle,
.campaign-step-controls button, .campaign-thumb, #consumer-minus, #consumer-plus, #pack-minus, #pack-plus {
  transition: transform 160ms var(--bc-ease-out), scale 160ms var(--bc-ease-out),
    background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.gold-link-circle { transition: border-color 160ms ease; }
.gold-link-circle svg { transition: transform 180ms var(--bc-ease-out); }
.text-link { text-underline-offset: 5px; }

/* Four recognisable steps; selection never changes their geometry. */
.draft-site-main .shop-buy-banner-link { min-height: 44px; padding: 10px 24px; font-size: 13px; }
.draft-site-main .header, .draft-site-main .header.scrolled {
  padding-block: 12px; gap: 6px 20px; background: #10110ff7;
  border-bottom: 1px solid var(--bc-border); box-shadow: 0 4px 18px #0002;
}
.header .journey-heading { color: #c6bca8; font-size: 13px; letter-spacing: .15px; }
.header .nav { border-top: 0; gap: 8px; }
.header .nav a.primary-area {
  min-height: 62px; padding: 10px 12px; border: 1px solid transparent;
  border-radius: 12px; background: #ffffff04; color: #cfcabe;
  font-size: clamp(12px, 1.3vw, 17px);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.header .nav a.primary-area.is-current {
  background: #c9a96214; border: 1px solid #c9a96269; color: #f3dfb3;
  box-shadow: inset 0 1px 0 #f4dfad0a;
}
.header .nav .nav-number {
  width: 30px; height: 30px; flex: 0 0 30px; font-size: 16px;
  border-color: #b8995866; background: #c9a96208; font-variant-numeric: tabular-nums;
}
.header .nav a.primary-area.is-current .nav-number { color: #16160f; background: #d3b476; border-color: #d3b476; }
.header .nav .professional-area {
  min-height: 44px; border-radius: 10px; font-size: 14px; background: transparent; border-color: var(--bc-border);
}
.header .languages { gap: 2px; }
.header .languages button { min-width: 36px; min-height: 44px; }
.header .menu-toggle { border-color: #b8995866; }
.header .menu-toggle span { transition: transform 180ms var(--bc-ease-out), opacity 120ms ease; }
.header .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg)!important; }
.header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.header .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg)!important; }
.header .secondary-menu {
  top: calc(100% + 8px); padding: 8px; border: 1px solid #c9a96255; border-radius: 16px;
  background: #191b15; box-shadow: 0 12px 40px #0006, 0 2px 6px #0003;
  transform-origin: top right; overscroll-behavior: contain;
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity 180ms var(--bc-ease-out), transform 180ms var(--bc-ease-out), display 180ms allow-discrete;
}
.header .secondary-menu[hidden] { opacity: 0; transform: translateY(-4px) scale(.98); transition-duration: 120ms; }
.header .secondary-menu a, .header .secondary-menu .header-training {
  padding: 13px 14px; border: 0; border-radius: 8px; min-height: 48px; font-size: 15px; line-height: 1.5;
}
@starting-style {
  .header .secondary-menu:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.98); }
}

/* Clear type and a consistent rhythm across the patient and professional views. */
.audience-view .section { padding-block: clamp(36px, 4.5vw, 64px); }
.audience-view h2, #b2b-title { letter-spacing: -.02em; }
.campaign .campaign-content { padding-top: clamp(44px, 5vw, 72px); }
.campaign h1 { font-size: clamp(40px, 4.8vw, 72px); letter-spacing: -.045em; line-height: 1.08; }
.campaign h1 em { letter-spacing: -.035em; }
.campaign .campaign-description { font-size: 17px; line-height: 1.7; max-width: 42ch; color: #c5c0b6; }
.campaign .campaign-actions .button { min-height: 56px; font-size: 14px; padding: 14px 22px; }
.campaign .campaign-actions .text-link { min-height: 44px; font-size: 14px; }
.campaign-slide { transition: opacity 240ms var(--bc-ease-out), visibility 240ms; }
.campaign-slide img, .campaign-slide.is-active img { transform: none; transition: none; }
.campaign-step-controls button { min-width: 44px; min-height: 44px; }
.campaign-thumb { min-width: 44px; min-height: 44px; }
.campaign-controls { gap: 16px; }
.campaign-thumbs { gap: 7px; }
:is(.training-module, .consumer-order-card, .quote-card, .risk-test-card, .premium-service, .hotel-card, .riecher-post-card) {
  border-color: var(--bc-border); border-radius: var(--bc-radius);
  box-shadow: inset 0 1px 0 #fff5dc05;
}
.training-module { background: #181b14; padding: clamp(24px, 3vw, 36px); }
.training-module p, .training-model p { max-width: 58ch; }
.training-circle { box-shadow: inset 0 1px 0 #fff3; }
.directory-card { border-color: var(--bc-border); border-radius: 12px; }
.directory-card summary { min-height: 64px; }
.directory-toolbar :is(input, select), .request-form :is(input, select, textarea), .application-form :is(input, select, textarea) {
  border-radius: 9px; min-height: 46px; transition: border-color 160ms ease, background-color 160ms ease;
}
:is(#consumer-total, #quote-total, #quote-unit, #quote-pack, #consumer-quantity, #order-quantity, #test-count, .campaign-current) {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
:is(#consumer-minus, #consumer-plus, #pack-minus, #pack-plus) { min-width: 44px; min-height: 44px; }
.breathe-test-start, .breathe-test-card[data-state="running"] .breathe-test-start {
  min-width: 190px; min-height: 64px; padding: 12px 24px;
}
.breathe-test-answer { min-height: 62px; }
.breathe-test-card { border-color: #b8995866; box-shadow: 0 8px 30px #0004; }
.breathe-test-start:hover, .breathe-test-answer:hover { filter: none; }
.bbt-video-play { transition: scale 160ms var(--bc-ease-out), background-color 160ms ease; }
.insurance-notice { border-color: #c6ae77; border-left-width: 3px; border-radius: 12px; }
.bc-consent { border-color: #c9a96266; border-radius: 16px; box-shadow: 0 10px 40px #0006; }
.bc-consent-actions button { border-radius: 8px; }
.thomas-invitation { border-color: #c9a96266; box-shadow: 0 8px 28px #0005; }
.thomas-invitation.is-dragging { cursor: grabbing; }
.thomas-invitation:not(.is-dragging) { transition: transform 200ms var(--bc-ease-out), opacity 160ms ease; }
.invite-toggle, .invite-dismiss { min-width: 36px; min-height: 36px; }
.thomas-invitation-link { padding-right: 82px; }
.thomas-invitation-copy { min-width: 0; }
.invite-toggle { right: 42px; }
.invite-dismiss { right: 4px; }

/* Dialogs enter from a near-full size; the browser owns modal focus and Escape. */
.riecher-welcome {
  border-color: #cfb983; box-shadow: 0 24px 80px #0006, 0 4px 16px #0003;
  opacity: 0; transform: translateY(8px) scale(.98);
  transition: opacity 140ms ease, transform 140ms var(--bc-ease-out),
    display 140ms allow-discrete, overlay 140ms allow-discrete;
}
.riecher-welcome[open] { opacity: 1; transform: translateY(0) scale(1); transition-duration: 220ms; }
.riecher-welcome::backdrop {
  backdrop-filter: blur(4px); opacity: 0;
  transition: opacity 140ms ease, display 140ms allow-discrete, overlay 140ms allow-discrete;
}
.riecher-welcome[open]::backdrop { opacity: 1; transition-duration: 220ms; }
@starting-style {
  .riecher-welcome[open] { opacity: 0; transform: translateY(8px) scale(.98); }
  .riecher-welcome[open]::backdrop { opacity: 0; }
}
.riecher-welcome h2, .riecher-welcome h3, .riecher-page h1 { text-wrap: balance; }
.riecher-button { border-radius: 10px; }
.riecher-page :is(a, button):focus-visible { outline-color: #806125; }
.riecher-page .riecher-article-body { max-width: 68ch; }

@media (hover: hover) and (pointer: fine) {
  .header .nav a.primary-area:hover { background: #c9a96210; border-color: #c9a9623d; }
  .header .secondary-menu a:hover { background: #c9a96212; }
  :is(.button, .text-link, .partner-brand-card):hover .gold-link-circle svg { transform: translate(1px, -1px); }
  .breathe-test-start:not(:disabled):hover { background: #e7cb91; }
  .breathe-test-answer:hover { border-color: #f5dca7; }
  .training-circle:hover { transform: translateY(-1px); }
  .hotel-card:hover { transform: translateY(-2px); }
}
@media (hover: none), (pointer: coarse) {
  :is(.button, .training-circle, .hotel-card, .premium-service, .country-card, .partner-brand-card):hover { transform: none; }
  .hotel-card:hover img, .bbt-download:hover .bbt-download-circle { transform: none; }
  .invite-toggle, .invite-dismiss { min-width: 44px; min-height: 44px; }
  .invite-toggle { right: 48px; }
  .thomas-invitation-link { padding-right: 94px; }
}
@media (max-width: 760px) {
  .draft-site-main .header, .draft-site-main .header.scrolled { padding: 8px 12px 10px; gap: 3px 10px; }
  .header .journey-heading { font-size: 12px; padding-block: 5px; }
  .header .nav { gap: 6px 4px; }
  .header .nav a.primary-area { min-height: 78px; padding: 8px 3px; font-size: 11px; gap: 6px; border-radius: 10px; }
  .header .nav .nav-number { width: 25px; height: 25px; flex-basis: 25px; font-size: 13px; }
  .header .nav .professional-area { font-size: 13px; }
  .header .languages button { min-width: 28px; }
  .header .secondary-menu { right: 12px; }
  .audience-view .section { padding: 36px 20px; }
  .campaign .campaign-content { padding: 32px 20px 24px; }
  .campaign h1 { font-size: clamp(36px, 8.8vw, 54px); letter-spacing: -.04em; }
  .campaign .campaign-description { font-size: 15px; line-height: 1.65; }
  .campaign .campaign-actions .button { padding: 13px 18px; }
  .campaign-controls { width: 100%; justify-content: space-between; gap: 8px; }
  .campaign-thumbs { gap: 4px; }
  .campaign-step-controls { gap: 4px; }
  .campaign-thumb { width: 36px; min-width: 36px; height: 44px; }
  .campaign-step-controls button { width: 40px; min-width: 40px; height: 44px; }
  .campaign .campaign-bottom { padding-inline: 20px; }
  :is(input, select, textarea) { font-size: 16px!important; }
  .riecher-welcome-copy { padding: 22px 24px 26px; }
  .riecher-welcome h3 { font-size: 23px; }
}
@media (max-width: 380px) {
  .campaign-thumbs { gap: 2px; }
  .campaign-thumb { width: 30px; min-width: 30px; }
  .campaign-step-controls button { width: 36px; min-width: 36px; }
  .campaign .campaign-actions { gap: 12px; }
  .campaign .campaign-actions .button { font-size: 13px; padding-inline: 14px; }
}
/* A keyboard action should never wait for decoration. */
html[data-input="keyboard"] *, html[data-input="keyboard"] *::before, html[data-input="keyboard"] *::after,
html[data-input="keyboard"] dialog::backdrop {
  animation: none!important; transition: none!important; scroll-behavior: auto!important;
}
html[data-input="keyboard"] { scroll-behavior: auto; }
html[data-input="keyboard"] :is(button, .button, .riecher-button, .training-circle, .breathe-test-answer):active { scale: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto!important; }
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  .riecher-welcome, .riecher-welcome[open], .header .secondary-menu, .header .secondary-menu[hidden] { transform: none; }
  :is(button, .button, .riecher-button, .training-circle, .breathe-test-answer):active { scale: none; }
}