/* TAPAXSURE Entwurf: gemeinsame Grundlage. TAPAX-Stil wie tapax-web.ch:
   weiss, ruhig, Systemschrift, Pillenknöpfe, Akzentfarbe je Marke (SURE: Tiefblau). Kein Dunkelmodus. */
:root {
  color-scheme: light;
  --akzent: #22507e;
  --akzent-dunkel: #1a4066;
  --akzent-hauch: rgba(34,80,126,0.08);
  --text: #1d1d1f;
  --text-leise: #636368;
  --flaeche: #f5f5f7;
  --haarlinie: #e8e8ed;
  --haarlinie-stark: #d2d2d7;
  --warn: #9a4b0c;
  --breite: 1180px;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--schrift); color: var(--text); background: #fff; font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(34,80,126,0.18); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; border-radius: 8px; }
.bahn { max-width: var(--breite); margin: 0 auto; padding: 0 28px; }
.marke-link { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; }
.marke-zeichen { height: 26px; width: auto; }
.marke-wort { height: 11px; width: auto; }
.h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -0.038em; font-weight: 650; text-wrap: balance; }
.lead { font-size: 21px; line-height: 1.45; color: var(--text-leise); }
.aktionen { display: flex; align-items: center; gap: 22px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--akzent); color: #fff; font-size: 14.5px; font-weight: 550; white-space: nowrap;
  transition: background-color .2s ease;
}
.knopf:hover { background: var(--akzent-dunkel); }
.knopf-rand { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--haarlinie-stark); }
.knopf-rand:hover { background: var(--flaeche); }
.knopf-gross { min-height: 52px; padding: 0 28px; font-size: 17px; }
.textlink { color: var(--akzent); font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }