/* Komponenten aus dem Design System „Dr. Spitzbart“ (components/bundle.css, unverändert übernommen). */
/* Dr. Spitzbart — component styles. Values come from tokens.css; the fluid
   type and rhythm formulas are copied from styles_20260727.css (breakpoint 1040px). */

body { margin: 0; background: var(--color-back); color: var(--color-front); font-family: var(--font-text); -webkit-font-smoothing: antialiased; }
.sb-root { --sb-pv: calc(0.7vw + 0.7vh + 7px); --sb-pb: calc(0.5vw + 0.5vh + 5px); --sb-pf: calc(0.2vw + 0.2vh + 2px); color: var(--color-front); font-family: var(--font-text); }
.sb-root *, .sb-root *::before, .sb-root *::after { box-sizing: border-box; }
.sb-texture { background-color: var(--color-back); position: relative; }
.sb-texture::before { content: ""; position: absolute; inset: 0; background-size: 93px 70px; background-repeat: repeat; background-image: var(--sb-texture-url, none); opacity: .95; pointer-events: none; }

/* ---------- type ---------- */
.sb-h0, .sb-h1, .sb-h2, .sb-h3 { margin: 0; font-family: var(--font-display); color: var(--color-front); word-break: normal; hyphens: manual; text-wrap: balance; }
.sb-h0, .sb-h1, .sb-h2 { font-weight: 400; }
.sb-h3 { font-weight: 500; }
.sb-p, .sb-small, .sb-tiny, .sb-label-text { margin: 0; font-family: var(--font-text); font-weight: 400; color: var(--color-front); word-break: break-word; hyphens: auto; }
.sb-title, .sb-topic { margin: 0; font-family: var(--font-text); font-weight: 900; word-break: normal; hyphens: manual; }
.sb-bold { font-weight: 650; }
.sb-middle { opacity: var(--opacity-middle); }
.sb-high { opacity: var(--opacity-high); }
.sb-shadow { text-shadow: var(--text-shadow); }
.sb-linktext { font-family: var(--font-text); font-weight: 500; }

@media (min-width: 1040px) {
  .sb-p { font-size: calc(12px + 0.3vw); line-height: calc(18px + 0.45vw); }
  .sb-small, .sb-linktext { font-size: calc(10.4px + 0.26vw); line-height: calc(15.2px + 0.38vw); }
  .sb-tiny { font-size: calc(8.8px + 0.22vw); line-height: calc(13.2px + 0.34vw); }
  .sb-linktext { letter-spacing: calc(0.2px + 0.05vw); }
  .sb-h3 { font-size: calc(18px + 0.9vw); line-height: calc(18px + 0.9vw); }
  .sb-title { font-size: calc(10px + 1.5vw); line-height: calc(12px + 1.8vw); letter-spacing: calc(0.2px + 0.03vw); }
  .sb-topic { font-size: calc(11px + 1.65vw); line-height: calc(13px + 1.95vw); letter-spacing: calc(0.2px + 0.03vw); }
  .sb-h2 { font-size: calc(39px + 2.6vw); line-height: calc(36px + 2.4vw); letter-spacing: calc(-0.2px - 0.05vw); }
  .sb-h1 { font-size: calc(47px + 4.7vw); line-height: calc(42px + 4.2vw); letter-spacing: calc(-0.8px - 0.08vw); }
  .sb-h0 { font-size: calc(54px + 5.4vw); line-height: calc(48px + 4.8vw); letter-spacing: calc(-1px - 0.1vw); }
}
@media (max-width: 1039px) {
  .sb-p { font-size: calc(14px + 0.35vw); line-height: calc(22px + 0.55vw); }
  .sb-small, .sb-linktext { font-size: calc(12.4px + 0.31vw); line-height: calc(16.8px + 0.42vw); }
  .sb-tiny { font-size: calc(10.8px + 0.27vw); line-height: calc(14.4px + 0.36vw); }
  .sb-linktext { letter-spacing: calc(0.2px + 0.05vw); }
  .sb-h3 { font-size: calc(16.5px + 1.1vw); line-height: calc(16.5px + 1.1vw); }
  .sb-title { font-size: calc(11.4px + 1.71vw); line-height: calc(12.8px + 1.92vw); letter-spacing: calc(0.2px + 0.03vw); }
  .sb-topic { font-size: calc(18px + 1.8vw); line-height: calc(20px + 2vw); letter-spacing: calc(0.3px + 0.03vw); }
  .sb-h2 { font-size: calc(22px + 3.3vw); line-height: calc(20px + 3vw); letter-spacing: calc(-0.2px - 0.05vw); }
  .sb-h1 { font-size: calc(38px + 5.7vw); line-height: calc(34px + 5.1vw); letter-spacing: calc(-0.8px - 0.08vw); }
  .sb-h0 { font-size: calc(44px + 6.6vw); line-height: calc(40px + 6vw); letter-spacing: calc(-1px - 0.1vw); }
}

/* ---------- icon ---------- */
.sb-icon { display: inline-block; width: calc(22px + 0.55vw); height: auto; padding: var(--padding-link); vertical-align: middle; }
.sb-icon-lg { display: block; width: calc(1.7 * var(--sb-pv)); height: calc(1.7 * var(--sb-pv)); }

/* ---------- focus (addition: the source sets :focus { outline: none }) ---------- */
.sb-root a:focus-visible, .sb-root button:focus-visible, .sb-root input:focus-visible, .sb-root [tabindex]:focus-visible { outline: 2px solid var(--color-front); outline-offset: 3px; }

/* ---------- Button (.link-button) ---------- */
.sb-btn { --line-width: 5px; position: relative; display: inline-flex; align-items: center; padding: calc(var(--sb-pb) * 1.4) var(--sb-pb); margin: 0; border: 0; border-radius: var(--radius-none); background: none; color: var(--color-front); text-decoration: none; cursor: pointer; overflow: hidden; -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); font: inherit; }
.sb-btn > .sb-icon, .sb-btn > .sb-linktext { position: relative; z-index: 1; }
.sb-btn .sb-linktext { padding: var(--padding-link); }
.sb-btn-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sb-btn-fx span { position: absolute; display: block; right: 50%; bottom: 50%; transform: translate(50%, 50%); background-color: var(--color-front); transition-duration: var(--duration-button); }
.sb-btn-fill { width: 100%; height: 100%; opacity: var(--opacity-button-fill); }
.sb-btn-sheen { bottom: 79% !important; width: 100%; height: 170%; background-color: transparent !important; background-image: linear-gradient(var(--sheen-angle), transparent 0%, transparent 21%, var(--color-front) 50%, transparent 79%, transparent 100%); opacity: var(--opacity-sheen); }
.sb-btn:hover .sb-btn-sheen { bottom: 21% !important; }
.sb-btn-line-0, .sb-btn-line-2 { width: 100%; height: var(--line-width); }
.sb-btn-line-1, .sb-btn-line-3 { width: var(--line-width); height: 100%; }
.sb-btn-line-0 { right: calc(150% + var(--line-width) / 2) !important; bottom: 0% !important; }
.sb-btn-line-1 { right: 0% !important; bottom: calc(150% + var(--line-width) / 2) !important; }
.sb-btn-line-2 { right: calc(-50% - var(--line-width) / 2) !important; bottom: 100% !important; }
.sb-btn-line-3 { right: 100% !important; bottom: calc(-50% - var(--line-width) / 2) !important; }
.sb-btn:hover .sb-btn-line-0 { right: calc(-30% - var(--line-width) / 2) !important; }
.sb-btn:hover .sb-btn-line-1 { bottom: calc(-30% - var(--line-width) / 2) !important; }
.sb-btn:hover .sb-btn-line-2 { right: calc(130% + var(--line-width) / 2) !important; }
.sb-btn:hover .sb-btn-line-3 { bottom: calc(130% + var(--line-width) / 2) !important; }
.sb-btn-block { display: flex; justify-content: center; width: 100%; }

/* ---------- TextLink (.link-default / .link-text) ---------- */
.sb-link { display: inline-flex; align-items: center; padding: var(--padding-link); color: var(--color-front); text-decoration: none; transition: opacity var(--duration-link); cursor: pointer; }
.sb-link .sb-linktext { padding: var(--padding-link); }
.sb-link:hover, .sb-link.is-dim { opacity: var(--opacity-hover); }
.sb-link.is-dim:hover { opacity: 1; }
.sb-link-inline { display: inline; padding: 0; color: inherit; text-decoration: underline; font-weight: inherit; transition: opacity var(--duration-link); }
.sb-link-inline:hover { opacity: var(--opacity-hover); }

/* ---------- Header ---------- */
.sb-header { padding: 0 var(--padding-horizontal); }
.sb-header-meta { display: flex; flex-wrap: wrap; gap: 0 calc(2 * var(--padding-link)); padding: calc(var(--sb-pv) / 4) 0; }
.sb-header-main { display: flex; align-items: center; gap: var(--sb-pv); padding: calc(var(--sb-pv) / 4) 0; }
.sb-logo { display: block; flex: none; width: calc(120px + 6vw); max-width: 45%; transition: opacity var(--duration-link); }
.sb-logo:hover { opacity: var(--opacity-hover); }
.sb-logo img { display: block; width: 100%; height: auto; }
.sb-header-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 calc(1.5 * var(--padding-link)); flex: 1; min-width: 0; }
.sb-header-actions { display: flex; align-items: center; gap: calc(2 * var(--padding-link)); margin-left: auto; }
@media (max-width: 1039px) { .sb-header-nav { display: none; } }

/* ---------- ModuleCard (.link-modul) ---------- */
.sb-card { position: relative; display: block; overflow: hidden; color: var(--color-front); text-decoration: none; background: var(--back-light); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); aspect-ratio: 3 / 2; max-width: 100%; }
.sb-card.is-square { aspect-ratio: 1 / 1; }
.sb-card.is-topic { aspect-ratio: 1 / 1; }
.sb-card-media { position: absolute; inset: 0; background: var(--color-back); transform: scale(1); transition: transform var(--duration-transform); -webkit-mask-image: linear-gradient(var(--sheen-angle), rgba(0,0,0,0) 0%, rgba(0,0,0,1) 29%, rgba(0,0,0,1) 71%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(var(--sheen-angle), rgba(0,0,0,0) 0%, rgba(0,0,0,1) 29%, rgba(0,0,0,1) 71%, rgba(0,0,0,0) 100%); }
.sb-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: var(--opacity-high); }
.sb-card-media.is-placeholder { background: linear-gradient(160deg, var(--switch-masterclass), var(--color-back)); }
.sb-card:hover .sb-card-media { transform: scale(1.07); }
.sb-card-tag { position: absolute; top: calc(var(--sb-pv) / 2); right: calc(var(--sb-pv) / 2); z-index: 1; }
.sb-card-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 4); padding: calc(var(--sb-pv) / 2) calc(var(--padding-horizontal) * 2 + 8px); }
.sb-card-more { display: flex; align-items: center; transition: opacity var(--duration-hover); }
.sb-card:hover .sb-card-more { opacity: var(--opacity-hover); }
.sb-card-desc { max-height: 0; opacity: 0; overflow: hidden; transition: opacity var(--duration-hover), max-height var(--duration-hover); }
.sb-card:hover .sb-card-desc { max-height: 240px; opacity: 1; }

/* ---------- Facts (63 Minuten · nur 299 € · auf 3 Raten möglich) ---------- */
.sb-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 calc(1.5 * var(--padding-link)); }
.sb-fact { display: inline-flex; align-items: baseline; gap: calc(0.7 * var(--padding-link)); }

/* ---------- Stat (+280.000 Facebook Follower) ---------- */
.sb-stat { display: inline-flex; flex-direction: column; align-items: center; gap: calc(var(--sb-pv) / 4); text-align: center; }
.sb-stat-label { display: inline-flex; align-items: center; }

/* ---------- Heading (eyebrow + h2) ---------- */
.sb-heading { display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 3); max-width: 62ch; }
.sb-fade-edge { position: relative; }
.sb-fade-edge::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, var(--color-back) 0%, transparent 10%, transparent 90%, var(--color-back) 100%); }

/* ---------- FeatureList (.icon-left) ---------- */
.sb-features { display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 1.5); margin: 0; padding: 0; list-style: none; }
.sb-feature { display: grid; grid-template-columns: calc(1.7 * var(--sb-pv)) 1fr; gap: calc(0.5 * var(--sb-pv)); align-items: start; }
.sb-feature > div { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 4); }

/* ---------- Accordion (.js-information-item) ---------- */
.sb-accordion { display: flex; flex-direction: column; }
.sb-acc-item { border: 0; }
.sb-acc-q { position: relative; display: block; width: 100%; padding: calc(var(--sb-pv) / 2) calc(3 * var(--sb-pv)) calc(var(--sb-pv) / 2) 0; margin: 0; border: 0; background: none; color: var(--color-front); text-align: left; cursor: pointer; font: inherit; }
.sb-acc-q .sb-p { transition: opacity var(--duration-link); }
.sb-acc-q:hover .sb-p { opacity: var(--opacity-hover); }
.sb-chevron { position: absolute; right: 0; top: 50%; width: calc(2 * var(--sb-pv)); height: calc(2 * var(--sb-pv)); transform: translateY(-50%); }
.sb-chevron span { position: absolute; display: block; bottom: 50%; width: 12px; height: 3px; background: var(--color-front); transition: transform var(--duration-button); }
.sb-chevron span:first-child { right: calc(50% + 4px); transform: translate(50%, 50%) rotate(37.5deg); }
.sb-chevron span:last-child { right: calc(50% - 4px); transform: translate(50%, 50%) rotate(-37.5deg); }
.sb-acc-item.is-open .sb-chevron span:first-child { transform: translate(50%, 50%) rotate(-37.5deg); }
.sb-acc-item.is-open .sb-chevron span:last-child { transform: translate(50%, 50%) rotate(37.5deg); }
.sb-acc-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--duration-button), opacity var(--duration-button); }
.sb-acc-item.is-open .sb-acc-a { max-height: 870px; opacity: 1; }
.sb-acc-a .sb-p { padding: 0 0 calc(var(--sb-pv) / 2); }

/* ---------- Steps (Ablauf 01–05) ---------- */
.sb-steps { display: flex; flex-direction: column; gap: calc(var(--sb-pv) / 1.5); margin: 0; padding: 0; list-style: none; }

/* ---------- NewsletterForm (.multistep) ---------- */
.sb-form { display: flex; flex-direction: column; gap: var(--sb-pf); max-width: 520px; }
.sb-form-row { display: flex; flex-wrap: wrap; gap: var(--sb-pf); align-items: stretch; }
.sb-field { position: relative; flex: 1 1 240px; min-width: 0; }
.sb-field-label { position: absolute; top: calc(var(--sb-pf) * 1.5); left: calc(3 * var(--sb-pf)); font-family: var(--font-text); font-weight: 500; font-size: calc(var(--sb-pf) / 2 + 8px); line-height: calc(var(--sb-pf) + 8px); letter-spacing: calc(var(--sb-pf) / 3 + 1px); opacity: .41; pointer-events: none; }
.sb-input { display: block; width: 100%; margin: 0; padding: calc(var(--sb-pb) + var(--sb-pf) * 1.5) calc(3 * var(--sb-pf)) var(--sb-pb); border: none; border-radius: var(--radius-none); -webkit-appearance: none; appearance: none; background-color: var(--input-back); color: var(--color-front); font-family: var(--font-text); font-size: inherit; transition-duration: .14s; }
.sb-input:hover { background-color: var(--input-hover); }
.sb-input::placeholder { color: var(--color-front); opacity: var(--opacity-label); }
.sb-optin { position: relative; display: block; padding-left: 34px; cursor: pointer; user-select: none; }
.sb-optin input { position: absolute; width: 0; height: 0; opacity: 0; }
.sb-checkmark { position: absolute; left: 0; top: 0; width: 24px; height: 24px; background-color: var(--input-hover); }
.sb-optin:hover .sb-checkmark { background-color: var(--checkbox-hover); }
.sb-checkmark::after { content: ""; position: absolute; display: none; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--color-front); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.sb-optin input:checked ~ .sb-checkmark::after { display: block; }
.sb-optin input:focus-visible ~ .sb-checkmark { outline: 2px solid var(--color-front); outline-offset: 3px; }

/* ---------- Patch (.color-invers) ---------- */
.sb-patch { display: inline-block; padding: 2px 7px; background: var(--color-front); color: var(--color-back); }
.sb-patch .sb-tiny, .sb-patch .sb-small { color: var(--color-back); }
.sb-patch-lg { display: inline-flex; align-items: center; justify-content: center; width: calc(112px + 2.8vw); aspect-ratio: 5 / 2; padding: 0; text-align: center; opacity: .87; }
.sb-patch-lg > span { padding: 0 5%; hyphens: manual; }

/* ---------- PaymentMethods (.payment-item) ---------- */
.sb-payments { display: flex; flex-wrap: wrap; gap: calc(1.5 * var(--padding-link)) calc(4 * var(--padding-link)); margin: 0; padding: 0; list-style: none; }
.sb-payment { display: inline-flex; align-items: center; padding: 2px 7px; }
.sb-payment img { max-width: calc(2.9 * var(--sb-pv)); max-height: calc(1.15 * var(--sb-pv)); margin-right: 11px; }

/* ---------- preview helpers ---------- */
.sb-stack { display: flex; flex-direction: column; gap: var(--sb-pv); padding: var(--sb-pv) max(16px, var(--padding-horizontal)); }
.sb-row { display: flex; flex-wrap: wrap; gap: var(--sb-pv); align-items: center; padding: var(--sb-pv) max(16px, var(--padding-horizontal)); }
.sb-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: calc(var(--sb-pv) / 2); padding: var(--sb-pv) max(16px, var(--padding-horizontal)); }

@media (prefers-reduced-motion: reduce) {
  .sb-root *, .sb-root *::before, .sb-root *::after { transition-duration: 0s !important; animation: none !important; }
}