/* Akquire-Fallstudie smahrt (29.10.2026). Hell wie smahrt.ch: Weiss, warmes Grau, das Bernstein aus dem Logo
   (#f8af2c) als Licht für grosse Zahlen und Flächen, Schrift in Nachtblau. Bernstein ist auf Weiss zu hell für
   kleine Schrift: dort steht ein tieferer Ton (#8a5a00, 5,5:1). Grundzustand ohne JavaScript oder mit
   «weniger Bewegung»: alles steht still. Die Uhr bis 2027, das Wortlicht und die Auftritte schaltet
   ak-smahrt-fall.js über .sm-an ein. Präfix sm-. */

.sm {
  --sm-text: #172033;
  --sm-grau: #4d5869;
  --sm-leise: #5f6b7c;
  --sm-bernstein: #f8af2c;
  --sm-tief: #8a5a00;
  --sm-navy: #13355e;
  --sm-flaeche: #f5f6f8;
  --sm-linie: rgba(23, 32, 51, .1);
  --sm-pad: var(--container-pad, 2.5rem);
  background: #fff;
  color: var(--sm-text);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
.sm *, .sm *::before, .sm *::after { box-sizing: border-box; }
.sm ::selection { background: var(--sm-bernstein); color: #172033; }
.sm-wrap { max-width: var(--container-max, 84rem); margin: 0 auto; padding: 0 var(--sm-pad); }
.sm a { color: inherit; }
.sm a:focus-visible, .sm [tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sm-navy); border-radius: 8px; }
.sm h1, .sm h2, .sm h3 { font-family: var(--font-display); color: var(--sm-text); margin: 0; letter-spacing: -.035em; }
.sm h2 { font-size: clamp(2.1rem, 5.8vw, 5.2rem); line-height: 1.03; font-weight: 700; max-width: 17ch; }
.sm h2 em { font-style: normal; color: #6b7586; }
.sm p { margin: 0; }
.sm-kapitel { display: inline-block; margin-bottom: 1.4rem; font: 600 .78rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sm-tief); }
.sm-lead { max-width: 44rem; margin-top: 1.6rem !important; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--sm-grau); }
.sm-quelle { margin-top: 1.4rem !important; max-width: 62rem; font-size: .86rem; line-height: 1.5; color: var(--sm-leise); }
.sm-fuer { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; max-width: 46rem; padding: 1.1rem 1.4rem; border-radius: 16px; background: #fff7e6; box-shadow: inset 0 0 0 1px rgba(248, 175, 44, .5); font-size: 1.05rem; line-height: 1.5; }
.sm-fuer b { color: var(--sm-tief); }

/* Knöpfe */
.sm-aktionen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.2rem; }
.sm-knopf { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: .85rem 1.5rem; border-radius: 999px;
  font: 600 1rem/1 var(--font-display); text-decoration: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.sm-knopf svg { width: 16px; height: 16px; }
.sm-knopf--voll { background: var(--sm-navy); color: #fff !important; }
.sm-knopf--voll:hover { background: #0e2747; transform: translateY(-1px); }
.sm-knopf--voll:focus-visible { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--sm-navy) !important; }
.sm-knopf--rand { color: var(--sm-text) !important; box-shadow: inset 0 0 0 1px rgba(23, 32, 51, .3); }
.sm-knopf--rand:hover { box-shadow: inset 0 0 0 1px var(--sm-text); }

/* 1 Hero: Titel und Zahlen tragen ihn -------------------------------------- */
.sm-held { position: relative; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); isolation: isolate; overflow: hidden;
  background: radial-gradient(60% 50% at 50% 0%, rgba(248, 175, 44, .22), rgba(255, 255, 255, 0) 70%), #fff; }
.sm-held .sm-wrap { text-align: center; }
.sm-pfad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; font-size: .85rem; color: var(--sm-leise); margin-bottom: 2.4rem; }
.sm-pfad a { text-decoration: none; }
.sm-pfad a:hover { color: var(--sm-text); }
.sm-pfad img { display: block; height: 14px; width: auto; }
.sm-marke { display: inline-block; margin-bottom: 1.6rem; }
.sm-marke img { display: block; height: clamp(52px, 6vw, 72px); width: auto; }
.sm-held__titel { font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1.03; font-weight: 700; letter-spacing: -.045em; max-width: 19ch; margin: 0 auto !important; }
.sm .sm-held__titel em { font-style: normal; display: inline; color: var(--sm-text);
  background: linear-gradient(transparent 84%, var(--sm-bernstein) 84%, var(--sm-bernstein) 97%, transparent 97%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sm-held__lead { max-width: 46rem; margin: 1.8rem auto 0 !important; font-size: clamp(1.05rem, 1.45vw, 1.22rem); line-height: 1.55; color: var(--sm-grau); text-wrap: pretty; }
.sm-held .sm-aktionen { justify-content: center; }
.sm-zahlen { list-style: none; margin: 3.4rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: 66rem; text-align: left; }
.sm-zahlen li { min-width: 0; padding-top: 1.1rem; border-top: 2px solid var(--sm-bernstein); }
.sm-zahlen b { display: block; font: 700 clamp(1.8rem, 3.2vw, 2.8rem)/1 var(--font-display); letter-spacing: -.04em; white-space: nowrap; }
.sm-zahlen span { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.4; color: var(--sm-grau); }

/* 2 Wie es anfing ----------------------------------------------------------- */
.sm-anfang { padding: clamp(6rem, 13vw, 11rem) 0; background: var(--sm-flaeche); }
.sm-datum { font: 600 .9rem/1 var(--font-display); color: var(--sm-tief); letter-spacing: .06em; margin-bottom: 1.8rem !important; }
.sm-woerter { font: 600 clamp(1.7rem, 4.2vw, 3.7rem)/1.12 var(--font-display); letter-spacing: -.03em; max-width: 26ch; }
.sm-an .sm-woerter .sm-w { color: #aab3c0; transition: color .25s linear; }
.sm-an .sm-woerter .sm-w.is-hell { color: var(--sm-text); }

/* 3 Die Uhr bis 2027: der grosse Moment ------------------------------------- */
.sm-uhr { padding: clamp(6rem, 12vw, 10rem) 0; background: var(--sm-navy); color: #fff; overflow: hidden; scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sm-uhr__innen { text-align: center; }
.sm-uhr__marke { font: 600 .9rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--sm-bernstein); }
.sm .sm-uhr__jahr { margin: .2em auto 0; max-width: none; font: 800 clamp(7rem, 31vw, 27rem)/.86 var(--font-display); letter-spacing: -.07em; color: var(--sm-bernstein);
  font-variant-numeric: tabular-nums; padding: .04em .12em .08em; }
.sm-uhr__satz { max-width: 34ch; margin: 1.6rem auto 0 !important; font: 600 clamp(1.4rem, 3vw, 2.5rem)/1.2 var(--font-display); letter-spacing: -.025em; color: #fff; }
.sm-uhr__satz em { font-style: normal; color: #b9c6da; }
.sm-uhr__tage { margin-top: 2.4rem !important; font-size: 1.1rem; color: #d6deea; }
.sm-uhr__tage b { display: block; font: 800 clamp(3rem, 8vw, 6rem)/1 var(--font-display); letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.sm-wege { list-style: none; margin: 3.4rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 58rem; text-align: left; }
.sm-wege li { padding: 1.4rem 1.3rem; border-radius: 18px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.sm-wege b { display: block; font: 700 1.25rem/1.2 var(--font-display); color: var(--sm-bernstein); }
.sm-wege span { display: block; margin-top: .5rem; color: #d6deea; line-height: 1.45; }
.sm-uhr .sm-quelle { margin-left: auto !important; margin-right: auto !important; color: #b9c6da; }
.sm-an .sm-uhr__jahr { opacity: calc(.35 + var(--j, 1) * .65); transform: scale(calc(.9 + var(--j, 1) * .1)); transition: none; }

/* 4 Übersicht --------------------------------------------------------------- */
.sm-ueber { padding: clamp(5rem, 10vw, 8rem) 0 clamp(2rem, 4vw, 3rem); }
.sm-ueber__liste { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.sm-ueber__liste a { display: flex; flex-direction: column; gap: .7rem; height: 100%; padding: 1.6rem 1.4rem; border-radius: 22px; background: var(--sm-flaeche); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--sm-linie); transition: transform .3s ease, box-shadow .3s ease; }
.sm-ueber__liste a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--sm-bernstein); }
.sm-ueber__nr { font: 600 .9rem/1 var(--font-display); color: var(--sm-tief); }
.sm-ueber__liste b { font: 700 1.45rem/1.15 var(--font-display); letter-spacing: -.02em; }
.sm-ueber__liste span:not(.sm-ueber__nr) { color: var(--sm-grau); line-height: 1.45; flex: 1; }
.sm-ueber__liste i { font-style: normal; font-weight: 600; color: var(--sm-text); }

/* Titelkarten --------------------------------------------------------------- */
.sm-titelkarte { padding: clamp(7rem, 14vw, 11rem) 0 clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--sm-linie); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sm-titelkarte__nr { display: block; font: 600 1rem/1 var(--font-display); color: var(--sm-tief); margin-bottom: 1rem; }
.sm-titelkarte__wort { font: 800 clamp(3.4rem, 12.5vw, 11.5rem)/.9 var(--font-display) !important; letter-spacing: -.06em; color: var(--sm-text); padding: .04em .12em .1em; margin: -.04em -.12em -.1em !important;
  -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
.sm-titelkarte__wort::after { content: ""; }
.sm-titelkarte__zeile { margin-top: 1.6rem !important; max-width: 32ch; font: 600 clamp(1.3rem, 2.4vw, 2rem)/1.2 var(--font-display); letter-spacing: -.02em; color: var(--sm-grau); }
.sm-titelkarte + section { padding-top: clamp(3rem, 6vw, 5rem); }
.sm-kapitel-ab, .sm-ergebnis { padding-bottom: clamp(5rem, 10vw, 8rem); }

/* Kapitel: Text links, echte E-Mail rechts ---------------------------------- */
.sm-zwei { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.sm-betreff { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: .5rem; }
.sm-betreff li { justify-self: start; padding: .55rem .9rem; border-radius: 10px; background: #fff7e6; box-shadow: inset 0 0 0 1px rgba(248, 175, 44, .55); font: 600 .98rem/1.3 var(--font-display); }
.sm-warum { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.sm-warum li { padding-left: 1.2rem; border-left: 3px solid var(--sm-bernstein); }
.sm-warum b { display: block; font: 600 1.1rem/1.3 var(--font-display); }
.sm-warum span { display: block; margin-top: .3rem; color: var(--sm-grau); line-height: 1.5; }
.sm-brief { margin: 0; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--sm-linie), 0 40px 90px -40px rgba(19, 53, 94, .4); }
.sm-brief__kopf { display: grid; gap: .45rem; padding: 1.1rem 1.4rem; background: var(--sm-flaeche); border-bottom: 1px solid var(--sm-linie); font-size: .92rem; }
.sm-brief__kopf div { display: flex; gap: .8rem; min-width: 0; }
.sm-brief__kopf span { flex: 0 0 4.2rem; color: var(--sm-leise); }
.sm-brief__kopf b { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.sm-brief pre { margin: 0; padding: 1.4rem 1.4rem 1.2rem; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .98rem/1.6 var(--font-body); color: var(--sm-text); }
.sm-brief figcaption { padding: .9rem 1.4rem 1.2rem; font-size: .86rem; line-height: 1.5; color: var(--sm-leise); border-top: 1px solid var(--sm-linie); }
.sm-werte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 3rem 0 0; max-width: 56rem; }
.sm-werte div { padding-top: 1rem; border-top: 2px solid var(--sm-bernstein); min-width: 0; }
.sm-werte dt { font-size: .85rem; color: var(--sm-leise); }
.sm-werte dd { margin: .3rem 0 0; font: 800 clamp(1.8rem, 3.4vw, 2.8rem)/1 var(--font-display); letter-spacing: -.04em; white-space: nowrap; }
.sm-werte--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.2rem; }

/* Ergebnis ------------------------------------------------------------------ */
.sm-trichter { list-style: none; margin: 3.2rem 0 0; padding: 0; display: grid; gap: .7rem; }
.sm-trichter li { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem 1.2rem; width: var(--w); min-width: min(100%, 16rem); padding: 1.2rem 1.4rem; border-radius: 16px;
  background: linear-gradient(90deg, #e9eef5, #f5f6f8); box-shadow: inset 0 0 0 1px var(--sm-linie); }
.sm-trichter b { font: 800 clamp(2rem, 4.4vw, 3.8rem)/1 var(--font-display); letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sm-trichter span { color: var(--sm-grau); }
.sm-trichter__ziel { background: var(--sm-bernstein) !important; box-shadow: 0 30px 70px -30px rgba(248, 175, 44, .8) !important; }
.sm-trichter__ziel span { color: #172033; }
.sm-tabelle { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 64rem; }
.sm-tabelle__kopf, .sm-tabelle__zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, .8fr)); gap: 1rem; align-items: center; }
.sm-tabelle__kopf { padding: 0 0 .7rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sm-leise); border-bottom: 1px solid var(--sm-linie); }
.sm-tabelle__kopf span:not(:first-child), .sm-tabelle__zeile span:not(:first-child) { text-align: right; }
.sm-tabelle__zeile { padding: 1.1rem 0; border-bottom: 1px solid var(--sm-linie); font: 700 1.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.sm-tabelle__zeile b { display: block; font: 700 1.1rem/1.25 var(--font-display); }
.sm-tabelle__zeile small { display: block; margin-top: .25rem; color: var(--sm-leise); font: 400 .88rem/1.3 var(--font-body); }
.sm-definition { margin-top: 2.5rem !important; max-width: 46rem; font-size: 1.08rem; line-height: 1.6; color: var(--sm-grau); }
.sm-definition b { color: var(--sm-text); }

/* Zeitleiste ---------------------------------------------------------------- */
.sm-zeit { padding: clamp(6rem, 12vw, 10rem) 0; background: var(--sm-flaeche); scroll-margin-top: calc(var(--nav-h, 74px) + 3.5rem); }
.sm-zeit__liste { position: relative; list-style: none; margin: 3.5rem 0 0; padding: 0 0 0 2.2rem; }
.sm-zeit__liste::before, .sm-zeit__liste::after { content: ""; position: absolute; left: 5px; top: .4rem; bottom: .4rem; width: 2px; background: #d3d8e0; }
.sm-zeit__liste::after { background: var(--sm-bernstein); transform-origin: top; transform: scaleY(var(--z, 1)); }
.sm-an .sm-zeit__liste::after { transform: scaleY(var(--z, 0)); }
.sm-zeit__liste li { position: relative; display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: 0 0 2rem; }
.sm-zeit__liste li::before { content: ""; position: absolute; left: calc(-2.2rem + 1px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--sm-tief); }
.sm-zeit__liste time { font: 600 1rem/1.4 var(--font-display); }
.sm-zeit__liste p { font-size: 1.1rem; line-height: 1.5; color: var(--sm-grau); }

/* Abschluss ----------------------------------------------------------------- */
.sm-schluss { padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem); text-align: center; background: radial-gradient(60% 50% at 50% 0%, rgba(248, 175, 44, .2), transparent 70%), #fff; }
.sm-schluss h2 { margin: 0 auto; max-width: 20ch; }
.sm-schluss h2 em { display: block; color: var(--sm-tief); }
.sm-schluss > .sm-wrap > p { max-width: 42rem; margin: 1.6rem auto 0 !important; font-size: 1.15rem; line-height: 1.55; color: var(--sm-grau); }
.sm-schluss .sm-aktionen { justify-content: center; }

/* Auftritte */
.sm-an .sm-auf { opacity: 0; transform: translateY(2.2rem); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, .1, 1); }
.sm-an .sm-auf.is-da { opacity: 1; transform: none; }

/* Kapitelleiste */
.sm-leiste { position: fixed; left: 50%; top: calc(var(--nav-h, 74px) + .7rem); z-index: 40; display: flex; gap: .2rem; padding: .3rem; border-radius: 999px;
  background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: inset 0 0 0 1px var(--sm-linie), 0 10px 30px rgba(19, 53, 94, .15);
  transform: translate(-50%, -140%); opacity: 0; visibility: hidden; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease, visibility 0s .45s; max-width: calc(100vw - 1.5rem); overflow-x: auto; scrollbar-width: none; }
.sm-leiste::-webkit-scrollbar { display: none; }
.sm-leiste.is-an { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease, visibility 0s; }
.sm-leiste a { flex: 0 0 auto; padding: .55rem 1rem; border-radius: 999px; font: 600 .88rem/1 var(--font-display); color: var(--sm-grau) !important; text-decoration: none; transition: color .25s ease, background .25s ease; }
.sm-leiste a:hover { color: var(--sm-text) !important; }
.sm-leiste a.is-hier { background: var(--sm-navy); color: #fff !important; }
.sm-leiste a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--sm-navy); }
.sm-leiste a.is-hier:focus-visible { box-shadow: inset 0 0 0 2px #fff; }

/* Breiten ------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .sm-ueber__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-zwei { grid-template-columns: minmax(0, 1fr); }
  .sm-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
}
@media (max-width: 900px) {
  .sm-werte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-wege { grid-template-columns: minmax(0, 1fr); }
  .sm-zeit__liste li { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .sm-tabelle__kopf, .sm-tabelle__zeile { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, .7fr)); gap: .6rem; font-size: 1rem; }
  .sm-leiste { top: calc(var(--nav-h, 64px) + .5rem); }
  .sm-leiste a { padding: .5rem .8rem; font-size: .82rem; }
  .sm-titelkarte, .sm-zeit, .sm-uhr { scroll-margin-top: calc(var(--nav-h, 64px) + 3.5rem); }
}
@media (max-width: 700px) {
  .sm-leiste { -webkit-mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1.6rem), transparent); }
  .sm-trichter li { width: 100%; }
  .sm-tabelle__kopf { font-size: .7rem; letter-spacing: .04em; }
}
@media (max-width: 520px) {
  .sm { --sm-pad: 1rem; }
  .sm-ueber__liste { grid-template-columns: minmax(0, 1fr); }
  .sm-zahlen b { font-size: clamp(1.4rem, 7vw, 2rem); white-space: normal; }
  .sm-brief pre { font-size: .9rem; padding: 1.1rem; }
  .sm-titelkarte__wort { font-size: clamp(2.6rem, 13.5vw, 4rem) !important; }
  .sm-werte dd { font-size: 1.6rem; }
  .sm-tabelle__kopf { font-size: .66rem; letter-spacing: 0; text-transform: none; gap: .5rem; }
  .sm-tabelle__kopf, .sm-tabelle__zeile { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .75fr)); }
  .sm-held__titel, .sm-schluss h2 { -webkit-hyphens: manual; hyphens: manual; }
}
@media (prefers-reduced-motion: reduce) {
  .sm *, .sm *::before, .sm *::after { animation: none !important; transition: none !important; }
}