/* ---------- Hero-Show: Vorteile in Aktion (ersetzt das Logo im Hero) ----------
   Farben nur aus den Hero-Variablen des Themes → passt zu allen 6 Themes.
   Jede Szene startet ihre Animationen, sobald sie .is-on bekommt (hero-show.js, 5,2 s je Szene). */
.show {
  grid-column: 2; grid-row: 1; align-self: center; justify-self: end;
  width: clamp(320px, 36vw, 560px);
  --s-fg: var(--hero-fg); --s-acc: var(--hero-accent);
  --s-bg: color-mix(in srgb, var(--hero-fg) 4%, var(--hero-bg));
  --s-card: color-mix(in srgb, var(--hero-fg) 8%, var(--hero-bg));
  --s-line: color-mix(in srgb, var(--hero-fg) 15%, transparent);
  --s-mute: color-mix(in srgb, var(--hero-fg) 55%, var(--hero-bg));
  --s-soft: color-mix(in srgb, var(--hero-fg) 22%, var(--hero-bg));
  --s-on-acc: var(--hero-bg);
  animation: fade-in 1s .3s both;
}
.show-win {
  background: var(--s-bg); color: var(--s-fg);
  border: 1px solid var(--s-line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.02);
}
.show-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--s-line); }
.show-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--s-soft); }
.show-url {
  flex: 1; margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--s-card);
  font-size: .78rem; color: var(--s-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.show-stage { position: relative; aspect-ratio: 16 / 10.5; container-type: inline-size; overflow: hidden; }
.sc {
  position: absolute; inset: 0; padding: 5cqw 6cqw;
  font-size: clamp(10px, 2.55cqw, 15px); line-height: 1.3;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s;
}
.sc.is-on { opacity: 1; visibility: visible; transition: opacity .35s .2s; } /* erst ausblenden, dann einblenden – keine Überlagerung zweier Szenen */
.sc small { font-size: .78em; color: var(--s-mute); }
.sc h4 { font-size: .8em; font-weight: 600; text-transform: lowercase; letter-spacing: .02em; color: var(--s-mute); margin-bottom: .8em; }
.show-stage > .cur { display: none; }
.cur { position: absolute; z-index: 5; width: 1.6em; height: 1.6em; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cur path { fill: var(--s-fg); stroke: var(--s-bg); stroke-width: 1.4; stroke-linejoin: round; }
.toast {
  position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%);
  padding: .55em 1.1em; border-radius: 999px; white-space: nowrap;
  background: var(--s-fg); color: var(--s-bg); font-weight: 500; font-size: .9em; opacity: 0;
}

@keyframes hs-pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes hs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hs-grow { from { transform: scaleX(0); } }
@keyframes hs-toast { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes hs-click { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8); } }

/* gemeinsame Bausteine der Beispielseite */
.d-nav { display: flex; align-items: center; gap: 4%; padding-bottom: 1em; margin-bottom: 1.3em; border-bottom: 1px solid var(--s-line); }
.d-nav b { font-weight: 600; margin-right: auto; }
.d-nav span { width: 9%; height: .45em; border-radius: 9px; background: var(--s-soft); }
.d-h { display: block; font-size: 1.75em; font-weight: 300; letter-spacing: -.02em; line-height: 1.1; }
.d-h2 { color: var(--s-acc); }
.d-p { display: block; height: .5em; border-radius: 9px; background: var(--s-soft); margin-top: .9em; width: 90%; transform-origin: left; }
.d-p2 { width: 65%; margin-top: .55em; }

/* 01 webdesign */
.sc-design .d-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 5%; align-items: center; }
.d-btn { display: inline-block; margin-top: 1.2em; padding: .55em 1.1em; border-radius: 999px; background: var(--s-acc); color: var(--s-on-acc); font-weight: 600; font-size: .85em; }
.d-img { aspect-ratio: 5/4; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--s-acc) 22%, var(--s-bg)); }
.d-img svg { width: 100%; height: 100%; display: block; }
.d-img path { fill: color-mix(in srgb, var(--s-acc) 60%, var(--s-bg)); }
.d-img circle { fill: var(--s-acc); }
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; margin-top: 1.6em; }
.d-cards span { height: 3.6em; border-radius: 8px; background: var(--s-card); border: 1px solid var(--s-line); }
.d-phone {
  position: absolute; right: 5cqw; bottom: 4cqw; width: 15cqw; aspect-ratio: 9/17.5;
  border: 2px solid var(--s-fg); border-radius: 1.8cqw; background: var(--s-bg); padding: 1.5cqw 1.2cqw;
  display: flex; flex-direction: column; gap: 1cqw; opacity: 0; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5);
}
.d-phone i { height: 6.5cqw; border-radius: 1cqw; background: color-mix(in srgb, var(--s-acc) 35%, var(--s-bg)); }
.d-phone b { height: 1cqw; border-radius: 9px; background: var(--s-soft); }
.d-phone b:last-child { width: 60%; height: 2.4cqw; background: var(--s-acc); }
.sc-design.is-on .d-nav { animation: hs-pop .5s .1s both; }
.sc-design.is-on .d-h { animation: hs-pop .6s .35s both; }
.sc-design.is-on .d-h2 { animation-delay: .5s; }
.sc-design.is-on .d-p { animation: hs-grow .6s .75s both; }
.sc-design.is-on .d-p2 { animation-delay: .85s; }
.sc-design.is-on .d-btn { animation: hs-pop .5s 1.05s both, hs-click .3s 2.5s; }
.sc-design.is-on .d-img { animation: hs-pop .7s .6s both; }
.sc-design.is-on .d-cards span { animation: hs-pop .5s 1.3s both; }
.sc-design.is-on .d-cards span:nth-child(2) { animation-delay: 1.42s; }
.sc-design.is-on .d-cards span:nth-child(3) { animation-delay: 1.54s; }
.sc-design.is-on .d-phone { animation: hs-phone .7s 3.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hs-phone { from { opacity: 0; transform: translate(30%, 20%) rotate(8deg); } to { opacity: 1; transform: none; } }
.sc-design.is-on .cur { animation: hs-cur-design 3s .4s both; }
@keyframes hs-cur-design {
  0% { opacity: 0; left: 70%; top: 90%; } 20% { opacity: 1; }
  65% { left: 24%; top: 66%; } 72% { left: 24%; top: 66%; transform: scale(.85); } 78% { transform: scale(1); }
  100% { opacity: 0; left: 24%; top: 66%; }
}

/* 02 seo */
.s-q { display: flex; align-items: center; gap: .7em; padding: .7em 1em; border: 1px solid var(--s-line); border-radius: 999px; background: var(--s-card); margin-bottom: 1.3em; min-height: 2.8em; }
.s-q svg { width: 1.1em; height: 1.1em; flex: none; }
.s-q svg * { fill: none; stroke: var(--s-mute); stroke-width: 2.4; stroke-linecap: round; }
.s-type::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--s-fg); animation: pulse 1s steps(1) infinite; }
.s-res { list-style: none; position: relative; --h: 3.5em; height: calc(var(--h) * 4); }
.s-res li { position: absolute; left: 0; right: 0; height: calc(var(--h) - .5em); padding: .35em .9em; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; }
.s-res li:nth-child(1) { top: 0; } .s-res li:nth-child(2) { top: var(--h); } .s-res li:nth-child(3) { top: calc(var(--h) * 2); } .s-res li:nth-child(4) { top: calc(var(--h) * 3); }
.s-res em { font-style: normal; font-size: .78em; color: var(--s-mute); }
.s-res b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-me { z-index: 2; background: var(--s-card); border-left: 3px solid var(--s-acc); box-shadow: 0 10px 24px -12px rgba(0,0,0,.45); } /* liegt beim Hochklettern über den anderen Treffern */
.s-me b { color: var(--s-acc); }
.s-badge { position: absolute; right: .8em; top: 50%; translate: 0 -50%; padding: .3em .8em; border-radius: 999px; background: var(--s-acc); color: var(--s-on-acc); font-size: .78em; font-weight: 700; opacity: 0; }
.sc-seo.is-on .s-res li { animation: hs-pop .45s both; }
.sc-seo.is-on .s-res li:nth-child(2) { animation: hs-pop .45s 1.6s both, hs-down .8s 2.5s cubic-bezier(.6,0,.2,1) both; }
.sc-seo.is-on .s-res li:nth-child(3) { animation: hs-pop .45s 1.7s both, hs-down .8s 2.5s cubic-bezier(.6,0,.2,1) both; }
.sc-seo.is-on .s-res li:nth-child(4) { animation: hs-pop .45s 1.8s both, hs-down .8s 2.5s cubic-bezier(.6,0,.2,1) both; }
.sc-seo.is-on .s-res .s-me { animation: hs-pop .45s 1.9s both, hs-up .8s 2.5s cubic-bezier(.6,0,.2,1) both; }
.sc-seo.is-on .s-badge { animation: hs-pop .4s 3.4s both; }
@keyframes hs-down { from { transform: translateY(-3.5em); } 25%, 75% { opacity: .1; } to { opacity: 1; } }
@keyframes hs-up { from { transform: translateY(10.5em); } } /* feste Werte statt var(): var() in Keyframes wird in Chrome nicht zuverlässig aufgelöst */

/* 03 statistiken */
.k-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; margin-bottom: 1.4em; }
.k { padding: .8em .9em; border-radius: 10px; background: var(--s-card); border: 1px solid var(--s-line); }
.k small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k b { display: block; font-size: 1.7em; font-weight: 400; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: .1em 0; }
.k i { font-style: normal; font-size: .78em; font-weight: 600; color: var(--s-acc); }
.k-chart { width: 100%; height: 34cqw; display: block; overflow: visible; }
.k-line { fill: none; stroke: var(--s-acc); stroke-width: 1.4; /* kein vector-effect: bricht die Zeichen-Animation mit pathLength */ stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.k-area { fill: color-mix(in srgb, var(--s-acc) 16%, transparent); opacity: 0; }
.sc-stats.is-on .k { animation: hs-pop .5s .15s both; }
.sc-stats.is-on .k:nth-child(2) { animation-delay: .27s; }
.sc-stats.is-on .k:nth-child(3) { animation-delay: .39s; }
.sc-stats.is-on .k-line { animation: lz-draw 2s .7s cubic-bezier(.45,.05,.3,1) forwards; }
.sc-stats.is-on .k-area { animation: hs-fade-to 1s 1.8s forwards; }
@keyframes hs-fade-to { to { opacity: 1; } }

/* 04 notiz auf der webseite */
.n-page { max-width: 62%; }
.n-line { display: block; margin-top: .6em; padding: .2em .4em; margin-left: -.4em; border-radius: 6px; outline: 2px dashed transparent; outline-offset: 2px; }
.n-pin {
  position: absolute; left: 58%; top: 34%; width: 1.7em; height: 1.7em; border-radius: 50% 50% 50% 0;
  display: grid; place-items: center; background: var(--s-acc); color: var(--s-on-acc); font-weight: 700; font-size: .85em; opacity: 0;
}
.n-bubble {
  position: absolute; right: 6cqw; top: 50%; width: 36%;
  padding: .9em 1em; border-radius: 12px; background: var(--s-bg); border: 1px solid var(--s-line);
  box-shadow: 0 16px 34px -14px rgba(0,0,0,.45); opacity: 0;
}
.n-bubble small { display: block; margin-bottom: .4em; }
.n-type { display: block; min-height: 2.6em; padding: .4em .5em; border-radius: 6px; background: var(--s-card); font-size: .9em; }
.n-bubble b { display: inline-block; margin-top: .7em; padding: .4em 1em; border-radius: 999px; background: var(--s-fg); color: var(--s-bg); font-size: .8em; font-weight: 600; }
.sc-note.is-on .n-target { outline-color: var(--s-acc); background: color-mix(in srgb, var(--s-acc) 12%, transparent); transition: outline-color .4s 1.3s, background-color .4s 1.3s; }
.sc-note.is-on .n-pin { animation: hs-pop .35s 1.35s both; }
.sc-note.is-on .n-bubble { animation: hs-pop .4s 1.5s both, hs-gone .4s 3.95s forwards; }
.sc-note.is-on .n-bubble b { animation: hs-click .3s 3.6s; }
.sc-note.is-on .n-toast { animation: hs-toast .45s 4.05s forwards; }
@keyframes hs-gone { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.sc-note.is-on .cur { animation: hs-cur-note 4s .3s both; }
@keyframes hs-cur-note {
  0% { opacity: 0; left: 60%; top: 85%; } 8% { opacity: 1; }
  22% { left: 34%; top: 40%; } 25% { transform: scale(.82); } 28% { transform: scale(1); left: 34%; top: 40%; }
  75% { left: 66%; top: 74%; } 82% { left: 66%; top: 74%; transform: scale(.82); } 86% { transform: scale(1); opacity: 1; }
  100% { left: 66%; top: 74%; opacity: 0; }
}

/* 05 aufgaben-board */
.b-cols { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; height: 100%; }
.b-col { background: var(--s-card); border-radius: 10px; padding: .8em .6em; }
.b-col h4 { height: 1.3em; margin-bottom: .8em; }
.b-card { display: block; height: 3.8em; border-radius: 8px; background: var(--s-bg); border: 1px solid var(--s-line); margin-bottom: .6em; }
.b-col .b-ghost:first-of-type { margin-top: 4.5em; }
.b-short { height: 2.8em; opacity: .7; }
.b-move {
  position: absolute; z-index: 2; top: calc(5cqw + 2.5em); left: calc(6cqw + .6em); width: calc(26.99cqw - 1.2em); height: 3.8em;
  padding: .55em .7em; border-radius: 8px; background: var(--s-bg); border: 1px solid var(--s-line); border-left: 3px solid var(--s-acc);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.4); opacity: 0;
}
.b-move b { display: block; font-weight: 500; font-size: .86em; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.b-st { position: absolute; left: .8em; bottom: .35em; font-size: .72em !important; opacity: 0; }
.sc-board .b-move::after {
  content: ""; position: absolute; right: -.6em; bottom: -.9em; width: 1.6em; height: 1.6em; opacity: 0;
  background: var(--s-fg); filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.8L4 20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-6.5 1.2L16 21l-3 1.4-3.4-6.8L4 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sc-board.is-on .b-col { animation: hs-pop .5s .1s both; }
.sc-board.is-on .b-move { animation: hs-pop .45s .5s both, hs-drag 3.4s 1.2s cubic-bezier(.6,0,.2,1) forwards; background: color-mix(in srgb, var(--s-acc) 12%, var(--s-bg)); border-color: var(--s-acc); transition: background-color .4s 3.9s, border-color .4s 3.9s; }
.sc-board.is-on .b-move::after { animation: hs-grab 3.4s 1.2s forwards; }
.sc-board.is-on .b-st1 { animation: hs-st 1.2s .5s both; }
.sc-board.is-on .b-st2 { animation: hs-st 1.9s 1.9s both; }
.sc-board.is-on .b-st3 { animation: hs-in .3s 3.9s both; opacity: 1; color: var(--s-acc); font-weight: 600; }
@keyframes hs-st { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hs-drag {
  0%, 8% { transform: none; }
  28%, 58% { transform: translateX(30.51cqw) rotate(-2deg); }
  35%, 62% { transform: translateX(30.51cqw); }
  85%, 100% { transform: translateX(61.02cqw); }
}
@keyframes hs-grab { 0% { opacity: 0; } 6%, 35% { opacity: 1; } 42%, 54% { opacity: 0; } 60%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* 06 web-app nach maß */
.a-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5%; height: 100%; }
.a-form { position: relative; }
.a-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.a-slots span { padding: .55em .4em; text-align: center; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-card); font-size: .88em; }
.a-slots .a-busy { opacity: .4; text-decoration: line-through; }
.a-field { display: flex; justify-content: space-between; align-items: center; margin-top: .9em; padding: .55em .8em; border-radius: 8px; border: 1px solid var(--s-line); }
.a-btn { display: block; margin-top: .9em; padding: .65em; text-align: center; border-radius: 999px; background: var(--s-fg); color: var(--s-bg); font-weight: 600; font-size: .88em; }
.a-studio { border-left: 1px dashed var(--s-line); padding-left: 1.2em; }
.a-studio > small { display: block; margin-bottom: .8em; }
.a-in, .a-old { padding: .7em .8em; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-card); margin-bottom: .6em; }
.a-in b, .a-old b { display: block; font-weight: 600; font-size: .9em; }
.a-in span, .a-old span { font-size: .8em; color: var(--s-mute); }
.a-in { border-left: 3px solid var(--s-acc); background: color-mix(in srgb, var(--s-acc) 12%, var(--s-bg)); opacity: 0; position: relative; }
.a-in::after { content: "neu"; position: absolute; right: .7em; top: .7em; font-size: .68em; font-weight: 700; padding: .15em .6em; border-radius: 999px; background: var(--s-acc); color: var(--s-on-acc); }
.sc-app.is-on .a-form > * { animation: hs-pop .45s .15s both; }
.sc-app.is-on .a-slots { animation-delay: .25s; }
.sc-app.is-on .a-field { animation-delay: .35s; }
.sc-app.is-on .a-btn { animation: hs-pop .45s .45s both, hs-click .3s 2.45s; }
.sc-app.is-on .a-studio { animation: hs-in .5s .5s both; }
.sc-app.is-on .a-pick { background: var(--s-acc); color: var(--s-on-acc); border-color: var(--s-acc); font-weight: 600; transition: background-color .3s 1.3s, color .3s 1.3s, border-color .3s 1.3s; }
.sc-app.is-on .a-in { animation: hs-slide .6s 2.9s cubic-bezier(.2,.8,.2,1) forwards; }
.sc-app.is-on .a-old { animation: hs-push .6s 2.9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hs-slide { from { opacity: 0; transform: translateY(-40%) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes hs-push { from { transform: translateY(calc(-100% - .6em)); } }
.sc-app.is-on .cur { animation: hs-cur-app 2.9s .5s both; }
@keyframes hs-cur-app {
  0% { opacity: 0; left: 40%; top: 85%; } 12% { opacity: 1; }
  28% { left: 30%; top: 38%; } 32% { transform: scale(.82); } 36% { transform: scale(1); left: 30%; top: 38%; }
  64% { left: 32%; top: 65%; } 69% { transform: scale(.82); } 74% { transform: scale(1); opacity: 1; left: 32%; top: 65%; }
  100% { opacity: 0; left: 32%; top: 65%; }
}

/* 07 hosting & betreuung */
.h-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 6%; align-items: center; height: 100%; }
.h-gauge { position: relative; text-align: center; }
.h-gauge svg { width: 100%; max-width: 15em; display: block; margin: 0 auto; transform: rotate(-90deg); }
.h-gauge circle { fill: none; stroke-width: 8; }
.h-track { stroke: var(--s-card); }
.h-val { stroke: var(--s-acc); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.h-gauge b { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -78%; font-size: 2.6em; font-weight: 300; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.h-gauge small { position: absolute; left: 0; right: 0; top: 50%; translate: 0 90%; }
.h-list { list-style: none; }
.h-list li { display: flex; align-items: center; gap: .7em; padding: .65em 0; border-bottom: 1px solid var(--s-line); }
.h-list li::before { content: "✓"; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; display: grid; place-items: center; font-size: .8em; font-weight: 700; background: var(--s-card); color: transparent; }
.sc-host.is-on .h-val { animation: hs-gauge 1.6s .5s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes hs-gauge { to { stroke-dashoffset: 4; } }
.sc-host.is-on .h-list li { animation: hs-pop .45s .3s both; }
.sc-host.is-on .h-list li::before { background: var(--s-acc); color: var(--s-on-acc); animation: hs-check .3s 1.4s; transition: background-color .2s 1.4s, color .2s 1.4s; }
.sc-host.is-on .h-list li:nth-child(2) { animation-delay: .4s; } .sc-host.is-on .h-list li:nth-child(2)::before { animation-delay: 1.8s; transition-delay: 1.8s; }
.sc-host.is-on .h-list li:nth-child(3) { animation-delay: .5s; } .sc-host.is-on .h-list li:nth-child(3)::before { animation-delay: 2.2s; transition-delay: 2.2s; }
.sc-host.is-on .h-list li:nth-child(4) { animation-delay: .6s; } .sc-host.is-on .h-list li:nth-child(4)::before { animation-delay: 2.6s; transition-delay: 2.6s; }
@keyframes hs-check { 50% { transform: scale(1.25); } }

/* Beschriftung + Fortschritt unter dem Fenster */
.show-cap { display: flex; gap: 14px; align-items: baseline; margin-top: 18px; min-height: 3.2em; }
.show-num { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--hero-accent); }
.show-cap b { display: block; font-weight: 500; font-size: 1.1rem; }
.show-cap div span { display: block; font-size: .95rem; opacity: .75; }
.show-dots { display: flex; gap: 6px; margin-top: 10px; }
.show-dots button { flex: 1; height: 18px; padding: 7px 0; border: 0; background: none; cursor: pointer; }
.show-dots i { display: block; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--hero-fg) 18%, transparent); overflow: hidden; position: relative; }
.show-dots i::after { content: ""; position: absolute; inset: 0; background: var(--hero-fg); transform: scaleX(0); transform-origin: left; }
.show-dots .is-done i::after { transform: none; opacity: .55; }
.show-dots .is-on i::after { animation: hs-bar 5.2s linear forwards; }
.show.is-paused .show-dots .is-on i::after { animation: none; transform: none; }
@keyframes hs-bar { to { transform: none; } }

@media (max-width: 820px) {
  .show { grid-column: 1; grid-row: 2; justify-self: stretch; width: 100%; max-width: 560px; margin: 0 auto; }
  .show-bar { padding: 8px 12px; }
  .show-cap { margin-top: 14px; }
  .show-cap b { font-size: 1rem; } .show-cap div span { font-size: .88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .show *, .show *::before, .show *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition: none !important; }
  .cur, .b-move::after { display: none !important; }
}

/* Desktop: Headline je Zeile einzeilig („gut aussehen.“ / „gefunden werden.“), Schrift etwas kleiner als ohne Show */
@media (min-width: 821px) {
  .hero-title { font-size: clamp(2.4rem, 6.4vw, 6.8rem); }
  .hero-title .line { white-space: nowrap; }
}