/* FAQ-Werkzeuge, Datenfluss-Grafik, Preiskarten, Rechner, Vergleichstabelle (siehe pricing.js). */

/* ---------------------------------------------------------------- FAQ */
.faq-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); }
.faq-col { min-width: 0; }
.faq-tools { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.fc { padding: 8px 16px; min-height: 40px; border: 0; border-radius: var(--r-pill); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: 600 .875rem var(--font); color: var(--muted); cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.fc:hover { transform: translateY(-2px); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.fc.on { background: var(--accent); color: #fff; box-shadow: none; }
.fc span { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .25); font-size: .75rem; }
.faq-all { justify-self: start; border: 0; background: none; padding: 4px 0; color: var(--accent); font: 600 .875rem var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.faq-item[hidden] { display: none; }
.faq-item { border-radius: 14px; border-bottom: 0; margin-bottom: 6px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px var(--line); padding: 0 var(--s4); transition: background var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); }
.faq-item:hover { background: #fff; }
.faq-item:has(.faq-q[aria-expanded=true]) { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.faq-q { padding: var(--s3) 0; }
.faq mark { background: rgba(63, 167, 214, .3); color: inherit; border-radius: 3px; padding: 0 1px; }
.faq-empty { padding: var(--s5); text-align: center; color: var(--muted); }
.faq-empty[hidden] { display: none; }

.flow { position: relative; margin-top: var(--s5); padding: var(--s4) var(--s4) var(--s4) var(--s5); border-radius: var(--r-card); background: var(--ink); color: var(--on-dark); overflow: hidden; }
.flow-title { margin: 0 0 var(--s3); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); }
.flow ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); position: relative; }
.flow ol::before { content: ""; z-index: 0; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: rgba(255, 255, 255, .16); }
.flow li { position: relative; z-index: 1; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; align-items: center; animation: flow-lit 8s ease-in-out infinite; }
.flow li:nth-child(2) { animation-delay: 2s; } .flow li:nth-child(3) { animation-delay: 4s; } .flow li:nth-child(4) { animation-delay: 6s; }
.fn { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #26385A; font: 700 .8125rem var(--font-mono); position: relative; z-index: 1; }
.flow b { font-size: .9375rem; } .flow small { color: var(--on-dark-muted); font-size: .8125rem; }
@keyframes flow-lit { 0%, 30%, 100% { opacity: .6; } 8%, 24% { opacity: 1; } }
.flow li .fn { animation: fn-lit 8s ease-in-out infinite; animation-delay: inherit; }
@keyframes fn-lit { 0%, 30%, 100% { background: #26385A; } 8%, 24% { background: var(--cyan); color: var(--ink); } }
.flow-dot { position: absolute; left: calc(var(--s5) + 11px); top: 54px; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px 3px rgba(63, 167, 214, .7); animation: flow-run 8s linear infinite; }
/* Zeitstrahl faerbt sich beim Scrollen: Linie fuellt sich, Kreise 1 bis 4 laufen nacheinander farbig an */
.flow.scrolly li, .flow.scrolly li .fn { animation: none; }
.flow.scrolly li { opacity: 1; }
.flow.scrolly li b, .flow.scrolly li small { opacity: .45; transition: opacity 500ms var(--ease); }
.flow.scrolly li.lit b, .flow.scrolly li.lit small { opacity: 1; }
.flow.scrolly .fn { transition: background 500ms var(--ease), color 500ms var(--ease), box-shadow 500ms var(--ease), transform 500ms var(--ease); }
.flow.scrolly li.lit .fn { background: linear-gradient(135deg, var(--accent), var(--cyan)); color: #fff; box-shadow: 0 0 0 4px rgba(63, 167, 214, .22), 0 6px 18px rgba(63, 167, 214, .45); transform: scale(1.08); }
.flow.scrolly li.cur .fn { animation: fn-ring 1.8s var(--ease) infinite; }
.flow.scrolly li.lit b { color: #fff; }
.flow.scrolly ol::after { content: ""; z-index: 0; position: absolute; left: 13px; top: 14px; width: 2px; height: calc((100% - 28px) * var(--lp, 0)); border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--cyan)); box-shadow: 0 0 12px 2px rgba(63, 167, 214, .55); transition: height 260ms linear; }
.flow.scrolly .flow-dot { display: none; }
@keyframes fn-ring { 0% { box-shadow: 0 0 0 0 rgba(63, 167, 214, .6), 0 6px 18px rgba(63, 167, 214, .45); } 70%, 100% { box-shadow: 0 0 0 12px rgba(63, 167, 214, 0), 0 6px 18px rgba(63, 167, 214, .45); } }
@keyframes flow-run { 0% { transform: translateY(0); opacity: 0; } 4% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(184px); opacity: 0; } }

/* ---------------------------------------------------------------- Preiskarten */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--s5) var(--s4); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.plan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(20, 73, 168, .35); background: linear-gradient(160deg, #123F94, #1B5FD1 70%, #2F7FE6); color: #fff; border-color: transparent; }
.plan:hover::after { transform: scaleX(1); background: rgba(255, 255, 255, .55); }
.plan:hover::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 60%); }
.plan h3 { margin: 0 0 var(--s2); font-size: 1.0625rem; }
.plan .amount { font: 700 2rem/1.1 var(--font); letter-spacing: -.03em; margin-bottom: var(--s2); }
.plan .tag { align-self: flex-start; display: inline-block; background: var(--accent-soft); color: var(--accent-strong); padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; margin-bottom: var(--s3); transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.plan:hover .tag { background: rgba(255, 255, 255, .2); color: #fff; }
.plan .per { color: var(--muted); font-size: .8125rem; margin: 0 0 var(--s3); min-height: 2.4em; transition: color var(--t-base) var(--ease); }
.plan:hover .per { color: rgba(255, 255, 255, .85); }
.ticks { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 7px; font-size: .875rem; }
.ticks li { position: relative; padding-left: 24px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: .6875rem; font-weight: 700; display: grid; place-items: center; transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.plan:hover .ticks li::before { background: rgba(255, 255, 255, .22); color: #fff; }
.fit { position: absolute; top: 14px; right: 14px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: .6875rem; font-weight: 700; opacity: 0; transform: translateY(-4px) scale(.9); transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); pointer-events: none; }
.plan.used .fit { opacity: 1; transform: none; }
.plan:hover .fit { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------------------------------------------------------------- Rechner */
.calc { margin-top: var(--s5); border-radius: 22px; background: linear-gradient(160deg, #fff, var(--accent-soft)); border: 1px solid var(--line); box-shadow: var(--shadow-1); padding: var(--s5) var(--s6); display: grid; grid-template-columns: minmax(180px, .6fr) 1.8fr; gap: var(--s6); align-items: center; }
.calc-head h3 { margin: 0 0 4px; font-size: 1.375rem; } .calc-head p { margin: 0; color: var(--muted); }
.calc-body { display: grid; gap: var(--s4); }
.calc-slider { display: grid; gap: var(--s2); }
.calc-num { display: flex; align-items: baseline; gap: 8px; } .calc-num b { font: 700 2.75rem/1 var(--font); letter-spacing: -.04em; color: var(--accent); min-width: 2ch; } .calc-num span { color: var(--muted); font-weight: 600; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; min-height: 0; height: 8px; padding: 0; border: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent) var(--fill, 15%), var(--line) var(--fill, 15%)); cursor: pointer; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 6px 16px rgba(27, 95, 209, .4); transition: transform var(--t-fast) var(--ease); }
.calc input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.18); }
.calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
.calc input[type=range]:focus-visible { box-shadow: var(--ring); }
.calc-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.co { padding: var(--s3) var(--s4); border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.co small { display: block; color: var(--muted); font-size: .75rem; margin-bottom: 2px; }
.co b { font: 700 1.25rem var(--font); letter-spacing: -.02em; display: inline-block; }
.co-main { background: var(--accent); box-shadow: 0 12px 28px rgba(27, 95, 209, .35); } .co-main small { color: rgba(255, 255, 255, .85); } .co-main b { color: #fff; font-size: 1.5rem; }
.calc b.pop { animation: chip-pop .45s var(--ease); }
.calc-pack { margin: 0; font-size: .875rem; color: var(--muted); }

/* ---------------------------------------------------------------- Vergleich mit anderen Wegen */
.vs { margin-top: var(--s5); padding: var(--s5) var(--s5) var(--s4); border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.vs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vs-scroll th[scope=row], .vs-scroll thead th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 8px 0 8px -8px rgba(15, 27, 45, .22); }
.vs h3 { margin: 0 0 var(--s4); font-size: 1.25rem; }
.vs table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 680px; font-size: .9375rem; }
.vs th, .vs td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.vs thead th { font-size: .8125rem; color: var(--muted); font-weight: 700; letter-spacing: .02em; border-bottom: 2px solid var(--line); }
.vs thead th:last-child { color: #fff; background: linear-gradient(135deg, #1B5FD1, #2F7FE6); border-radius: 12px 12px 0 0; border-bottom: 0; }
.vs tbody th { font-weight: 600; width: 22%; }
.vs td { color: var(--muted); }
.vs td.us { color: var(--ink); font-weight: 600; background: var(--accent-soft); }
.vs tbody tr:last-child th, .vs tbody tr:last-child td { border-bottom: 0; }
.vs tbody tr:last-child td.us { border-radius: 0 0 12px 12px; }
.vs tbody tr { transition: background var(--t-fast) var(--ease); }
.vs tbody tr:hover th, .vs tbody tr:hover td:not(.us) { background: #F6F9FE; }
.vs > .small { margin: var(--s3) 0 0; }

@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .calc-out { grid-template-columns: 1fr 1fr; } .co-main { grid-column: span 2; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .calc { padding: var(--s4); }
}
@media (max-width: 460px) { .plans { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Feinschliff: weiche Preiskarten und stufenloser Regler */
@property --c1 { syntax: "<color>"; inherits: false; initial-value: #FFFFFF; }
@property --c2 { syntax: "<color>"; inherits: false; initial-value: #FFFFFF; }
@property --c3 { syntax: "<color>"; inherits: false; initial-value: #FFFFFF; }
.plan { background: linear-gradient(160deg, var(--c1), var(--c2) 70%, var(--c3)); transition: transform 750ms var(--ease), box-shadow 750ms var(--ease), --c1 750ms var(--ease), --c2 750ms var(--ease), --c3 750ms var(--ease), color 750ms var(--ease), border-color 750ms var(--ease); }
.plan:hover { --c1: #123F94; --c2: #1B5FD1; --c3: #2F7FE6; background: linear-gradient(160deg, var(--c1), var(--c2) 70%, var(--c3)); transform: translateY(-8px) scale(1.018); box-shadow: 0 30px 70px rgba(20, 73, 168, .36); }
.plan::after { transition: transform 900ms var(--ease), background 750ms var(--ease); }
.plan .tag, .plan .per, .ticks li::before, .fit, .plan h3, .plan .amount { transition: color 750ms var(--ease), background-color 750ms var(--ease), opacity 750ms var(--ease), transform 750ms var(--ease); }
.plan .amount { transform-origin: left center; }
.plan:hover .amount { transform: scale(1.06); }
.fit { white-space: nowrap; padding: 4px 12px; }
.plan.used { border-color: rgba(12, 122, 87, .45); box-shadow: var(--shadow-1), 0 0 0 1px rgba(12, 122, 87, .25); }
.plan.used:hover { border-color: transparent; }

.calc input[type=range] { --p: .15; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--accent) calc(var(--p) * (100% - 28px) + 14px), var(--line) calc(var(--p) * (100% - 28px) + 14px)); box-shadow: inset 0 1px 2px rgba(15, 27, 45, .08); touch-action: pan-y; }
.calc input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.calc input[type=range]:active::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 8px 22px rgba(27, 95, 209, .5), 0 0 0 8px rgba(27, 95, 209, .14); }
.calc input[type=range]::-moz-range-thumb { width: 28px; height: 28px; transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.calc input[type=range]:active::-moz-range-thumb { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(27, 95, 209, .14); }

/* Preiskarten: keine Zusatzschichten beim Hover (kein Spotlight, kein Balken oben); nur der Verlauf, die Hebung und die Schrift blenden */
.plan::before, .plan::after { display: none; }
.plan:hover { transform: translateY(-8px); border-color: transparent; }
.plan { border-color: var(--line); }
.plan:hover .amount { transform: none; }

/* Preiskarten: laengere, weichere Bewegung mit kleiner Verzoegerung beim Hineinfahren (kein Zucken beim Ueberfahren), Rueckweg etwas schneller */
.plan { --pe: cubic-bezier(.3, .7, .2, 1); transition: transform 1100ms var(--pe), box-shadow 1100ms var(--pe), --c1 1100ms var(--pe), --c2 1100ms var(--pe), --c3 1100ms var(--pe), color 1100ms var(--pe), border-color 900ms var(--pe); }
.plan:hover { transform: translateY(-10px) scale(1.03); transition-delay: 110ms; }
.plan .tag, .plan .per, .ticks li::before, .fit, .plan h3, .plan .amount { transition: color 1100ms var(--pe), background-color 1100ms var(--pe), opacity 900ms var(--pe), transform 900ms var(--pe); }
.plan:hover .tag, .plan:hover .per, .plan:hover .ticks li::before, .plan:hover .fit, .plan:hover h3, .plan:hover .amount { transition-delay: 110ms; }

/* Preiskarten, endgueltig: keine Farbumkehr mehr (sie wirkte wie uebereinanderliegende Ebenen). Die Karte bleibt hell, hebt sich weich,
   bekommt Rahmen und Schein; nur der Preis und der Rahmen nehmen die Akzentfarbe an. Eine Bewegung, eine Dauer, keine Einzelverzoegerungen. */
.plan, .plan:hover { --c1: #FFFFFF; --c2: #FFFFFF; --c3: #FFFFFF; background: #fff; color: var(--ink); }
.plan { --pe: cubic-bezier(.25, .8, .25, 1); transition: transform 900ms var(--pe), box-shadow 900ms var(--pe), border-color 900ms var(--pe), background-color 900ms var(--pe); transition-delay: 0s; }
.plan:hover { transform: translateY(-8px); transition-delay: 70ms; border-color: var(--accent); box-shadow: 0 28px 60px rgba(20, 73, 168, .2), 0 0 0 1px var(--accent); background: #F7FAFF; }
.plan .tag, .plan .per, .ticks li::before, .fit, .plan h3, .plan .amount { transition: color 900ms var(--pe), background-color 900ms var(--pe), transform 900ms var(--pe); transition-delay: 0s; }
.plan:hover .tag { background: var(--accent-soft); color: var(--accent-strong); transition-delay: 70ms; }
.plan:hover .per { color: var(--muted); }
.plan:hover .ticks li::before { background: var(--ok-soft); color: var(--ok); }
.plan:hover .fit { background: var(--ok-soft); color: var(--ok); }
.plan .amount { color: var(--ink); }
.plan:hover .amount { color: var(--accent); transition-delay: 70ms; }
.plan.used:hover { border-color: var(--accent); }


/* Preisrechner wie auf /v2: Plus/Minus, Paketkacheln, Preisvorteil mit Balken (heller Stil der Ausgangsseite) */
.calc-ctl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.calc-step { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--accent); font: 600 1.3rem/1 var(--font); cursor: pointer; box-shadow: var(--shadow-1); transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.calc-step:hover { background: var(--accent-soft); transform: scale(1.08); }
.calc-step:focus-visible { box-shadow: var(--ring); outline: 0; }
.calc-stack { display: flex; flex-wrap: wrap; gap: 10px; min-height: 84px; align-content: flex-start; }
.c-pack { display: grid; align-content: center; gap: 1px; min-width: 96px; padding: 10px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(14px) scale(.92); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.c-pack.in { opacity: 1; transform: none; }
.c-pack b { font: 700 1.6rem/1 var(--font); letter-spacing: -.03em; color: var(--accent); } .c-pack span { font-size: .8rem; color: var(--muted); } .c-pack em { font: normal 500 .74rem var(--font); color: var(--muted); }
.c-pack.big { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); } .c-pack.mid { background: var(--accent-soft); }
.c-pack.free { box-shadow: inset 0 0 0 1px var(--line); border: 1px dashed var(--accent); } .c-pack.spare { border: 1px dashed var(--line); } .c-pack.spare.in { opacity: .75; }
.co-dn { display: inline-block; margin-left: 4px; color: #0a8a5c; font-style: normal; font-weight: 700; opacity: .5; } .co-dn.go { animation: co-dn .9s var(--ease); }
@keyframes co-dn { 0% { transform: translateY(-8px); opacity: 0; } 40% { opacity: 1; } 100% { transform: none; opacity: .5; } }
.calc-alt { justify-self: start; padding: 0; border: 0; background: none; color: var(--accent); font: 500 .875rem var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .calc-alt[hidden] { display: none; }
.calc-save { padding: var(--s4); border-radius: 16px; background: #fff; border: 1px solid var(--line); display: grid; gap: 12px; }
.sv-h { margin: 0; color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; }
.sv-big { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .sv-big b { font: 700 clamp(2.4rem, 4vw, 3.4rem)/1 var(--font); letter-spacing: -.04em; color: #0a8a5c; min-width: 3ch; } .sv-big span { color: var(--muted); max-width: 34ch; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "b b"; align-items: baseline; gap: 6px 12px; font-size: .9rem; color: var(--muted); }
.sv-row > span { grid-area: l; } .sv-row > b { grid-area: v; font: 600 1rem var(--font); color: var(--ink, #0f1b2d); font-variant-numeric: tabular-nums; } .sv-row > .sv-bar { grid-area: b; }
.sv-bar { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.sv-bar u { display: block; height: 100%; width: 100%; border-radius: 5px; background: #9db2cf; transform-origin: left; transform: scaleX(0); transition: transform .7s var(--ease); }
.sv-big b.sv-eur { font-size: clamp(2.4rem, 4vw, 3.4rem); color: #fff; background: #0a8a5c; padding: 4px 16px 8px; border-radius: 14px; min-width: 0; } .sv-big b.sv-eur[hidden] { display: none; }
.sv-best .sv-bar { background: repeating-linear-gradient(135deg, rgba(10, 138, 92, .22) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px rgba(10, 138, 92, .35); }
.sv-best .sv-bar u { background: linear-gradient(90deg, #0a8a5c, #34c58f); } .sv-best > b { color: #0a8a5c; }
@media (prefers-reduced-motion: reduce) { .c-pack, .sv-bar u { transition: none; } }
.calc { align-items: start; }