/* Ermeth showcase shell: shared tokens, bar, footer and components for the four demos.
   Each demo sets --sc-accent, --sc-ink, --sc-surface, --sc-soft inline and adds /showcase-<id>.css.
   Zwei Ebenen (5. Oktober 2026, Marke «Klartext»): Die fiktiven Betriebe behalten Manrope und ihre Paletten (--sc-*).
   Die Ermeth-Ebene (Leiste, Musterband, Pakethinweis, Einordnung, Fuss) trägt die Marke: Schibsted Grotesk, Newsreader,
   Farben und Bewegung aus brand/03-markenpaket/system/tokens.css, Vertrag docs/design-system-2026-10-05-klartext.md. */
@font-face{font-family:Manrope;src:url('/assets/manrope-latin.woff2') format('woff2');font-weight:200 800;font-display:swap}
/* Markenschriften (OFL 1.1, Lizenz in /assets/fonts/<familie>/LICENSE.txt), nur für die Ermeth-Ebene; laden erst bei Gebrauch. */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/fonts/schibsted-grotesk/latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader/latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader/latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Markentokens, wörtlich aus brand/03-markenpaket/system/tokens.css (Auszug für die Ermeth-Ebene). */
:root{--nacht:#0b1620;--nacht-2:#1a2a37;--linie-dunkel:#2f3f4c;--tinte:#13202b;--grau:#5a636c;--linie-kraeftig:#78818a;--nebel:#b7c1cb;--linie:#d6d3cd;--stein:#eceae6;--kreide:#f6f5f2;--papier:#ffffff;--holz:#d39a5f;--holz-kraeftig:#b8621f;--muster:#2d4fae;--muster-dunkel:#a9bcf7;--muster-flaeche:#eaeefb;
 --serif:Newsreader, Georgia, 'Times New Roman', serif;--sans:'Schibsted Grotesk', Arial, 'Helvetica Neue', sans-serif;
 --fs-h2:clamp(30px, 26.29px + 0.95vw, 40px);--fs-h3:clamp(20px, 19.26px + 0.19vw, 22px);--fs-lead:clamp(19px, 17.89px + 0.29vw, 22px);
 --linie-kontur:1.5px;--linie-betont:2px;
 --dauer-kurz:140ms;--dauer-mittel:240ms;--dauer-linie:480ms;--dauer-auftritt:640ms;
 --kurve-praezise:cubic-bezier(0.2, 0.7, 0, 1);--kurve-linie:cubic-bezier(0.65, 0, 0.35, 1);
 /* Rand der Ermeth-Ebene bündig mit .sc-wrap (min(1320px, 92%)) */
 --fl-rand:max(4%, calc(50% - 660px))}
@media (prefers-reduced-motion:reduce){:root{--dauer-kurz:0ms;--dauer-mittel:0ms;--dauer-linie:0ms;--dauer-auftritt:0ms}}
html.motion-paused{--dauer-kurz:0ms;--dauer-mittel:0ms;--dauer-linie:0ms;--dauer-auftritt:0ms}
:root{--sc-accent:#244cbd;--sc-accent-ink:#fff;--sc-ink:#16212b;--sc-muted:#5b6876;--sc-line:#e2e7ec;--sc-line-strong:#c9d1da;--sc-surface:#fff;--sc-soft:#f3f5f8;--sc-good:#2e7d5b;--sc-warn:#b26a1b;--sc-bad:#b3362f;--sc-radius:10px;--sc-radius-sm:6px;--sc-shadow:0 24px 50px -24px #16212b33,0 2px 6px #16212b0f;--sc-font:Manrope,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
.motion-paused html,html.motion-paused{scroll-behavior:auto}
body.sc-page{margin:0;font:400 16px/1.55 var(--sc-font);color:var(--sc-ink);background:var(--sc-surface);-webkit-font-smoothing:antialiased}
.sc-page a{color:inherit}
.sc-page button,.sc-page input,.sc-page select,.sc-page textarea{font:inherit;color:inherit}
.sc-page button{cursor:pointer}
.sc-page button:disabled{cursor:default;opacity:.5}
.sc-page :focus-visible{outline:3px solid var(--sc-accent);outline-offset:3px;border-radius:2px}
.sc-page img{max-width:100%;display:block}
.sc-page h1,.sc-page h2,.sc-page h3,.sc-page h4{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.15}
.sc-page p{margin:0}
.sc-page [hidden]{display:none!important}
.sc-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sc-skip{position:fixed;top:-80px;left:16px;z-index:100;background:var(--sc-ink);color:#fff;padding:12px 16px;border-radius:var(--sc-radius-sm)}
.sc-skip:focus{top:12px}
/* ---------------------------------------------------------------- Ermeth-Leiste (Nacht): Kompakt-Wortmarke, «Alle Beispiele»,
   Name des fiktiven Betriebs, Pausenknopf, Kontaktknopf sekundär (der Primärknopf gehört dem fiktiven Betrieb). Desktop fest oben,
   mobil zweizeilig und mitlaufend, damit die Demo den Bildschirm hat. Selektoren mit body.sc-page schlagen die Shell-Regeln
   .sc-page a{color:inherit} und die Übergangsregeln der Demo-Blätter. */
body.sc-page .sc-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;min-height:56px;padding:6px var(--fl-rand);background:var(--nacht);color:var(--papier);font:400 16px/1.4 var(--sans);border-bottom:1px solid var(--linie-dunkel)}
body.sc-page .sc-bar-brand{display:flex;align-items:center;gap:20px;flex:none}
body.sc-page .sc-bar-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--papier);text-decoration:none}
body.sc-page .sc-bar .logo-mark,body.sc-page .sc-foot .logo-mark{display:block;height:auto;overflow:visible}
body.sc-page .sc-bar .logo-mark{width:124px}
body.sc-page :is(.sc-bar,.sc-foot) .logo-q{fill:var(--holz)}
body.sc-page .sc-bar-back{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-left:20px;border-left:1px solid var(--linie-dunkel);font:500 16px/1.25 var(--sans);color:var(--papier);text-decoration:none;white-space:nowrap}
body.sc-page .sc-bar-back::after{content:'';position:absolute;left:20px;right:0;bottom:8px;height:var(--linie-betont);background:var(--holz);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise)}
body.sc-page .sc-bar-back:hover{color:var(--papier)}
body.sc-page .sc-bar-back:hover::after{transform:scaleX(1)}
body.sc-page .sc-bar-label{flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;column-gap:12px;min-width:0;margin:0;text-align:center;font:400 14px/1.45 var(--sans);letter-spacing:.005em;color:var(--nebel)}
body.sc-page .sc-bar-label strong{min-width:0;font:600 16px/1.3 var(--sans);letter-spacing:0;color:var(--papier);text-wrap:balance;overflow:visible;text-overflow:clip}
body.sc-page .sc-bar-label span{color:var(--nebel);font-size:14px;white-space:nowrap}
body.sc-page .sc-bar-actions{display:flex;align-items:center;gap:20px;flex:none}
/* Pausenknopf (motion.md): Zeichen zwei Balken oder Dreieck, Wort aus showcase.mjs; mobil nur das Zeichen, 44 × 44 px. */
body.sc-page .sc-motion{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;border-radius:0;font:500 16px/1.2 var(--sans);color:var(--nebel);text-decoration:none;white-space:nowrap;cursor:pointer}
body.sc-page .sc-motion::before{content:'';flex:none;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
body.sc-page .sc-motion[aria-pressed=true]::before,html.motion-paused body.sc-page .sc-motion::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
body.sc-page .sc-motion:hover{color:var(--papier)}
body.sc-page .sc-motion:disabled{opacity:1;cursor:default;color:var(--nebel)}
body.sc-page .sc-bar-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border:0;border-radius:0;background:transparent;color:var(--papier);box-shadow:inset 0 0 0 1.5px var(--nebel);font:600 16px/1.25 var(--sans);text-decoration:none;white-space:nowrap;transition:box-shadow var(--dauer-kurz) linear}
body.sc-page .sc-bar-cta::after{content:'';position:absolute;left:20px;right:20px;bottom:10px;height:var(--linie-betont);background:var(--holz);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise);pointer-events:none}
body.sc-page .sc-bar .sc-bar-cta:hover{background:transparent;color:var(--papier);box-shadow:inset 0 0 0 1.5px var(--papier)}
body.sc-page .sc-bar-cta:hover::after{transform:scaleX(1)}
body.sc-page .sc-bar-cta:active{transform:translateY(1px)}
/* Fokus der Marke: auf Nacht Ring Papier mit Halo Nacht, auf Papier Ring Tinte mit Halo Papier, ohne Übergang. */
body.sc-page :is(.sc-bar,.sc-einordnung,.sc-foot) :focus-visible{outline:2px solid var(--papier);outline-offset:2px;box-shadow:0 0 0 2px var(--nacht);border-radius:0}
body.sc-page .sc-bar .sc-bar-cta:focus-visible{box-shadow:inset 0 0 0 1.5px var(--papier),0 0 0 2px var(--nacht)}
body.sc-page :is(.sc-strip,.sc-paket) :focus-visible{outline:2px solid var(--tinte);outline-offset:2px;box-shadow:0 0 0 2px var(--papier);border-radius:0}
/* Main and footer */
.sc-main{min-height:60vh}
.sc-wrap{width:min(1320px,92%);margin:0 auto}
/* Fuss der Ermeth-Ebene (Nacht), schliesst an die Einordnung an: Wortmarke, Satz zur Demo, Wege zurück. */
body.sc-page .sc-foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:24px 48px;padding:48px var(--fl-rand) 56px;background:var(--nacht);color:var(--nebel);border-top:1px solid var(--linie-dunkel);font:400 16px/1.55 var(--sans)}
body.sc-page .sc-foot-brand{display:grid;gap:16px;justify-items:start;max-width:40em}
body.sc-page .sc-foot-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--papier);text-decoration:none}
body.sc-page .sc-foot .logo-mark{width:140px}
body.sc-page .sc-foot p{margin:0;color:var(--nebel)}
body.sc-page .sc-foot nav{display:flex;flex-wrap:wrap;gap:4px 32px}
body.sc-page .sc-foot nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;color:var(--papier);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,var(--papier) 45%,transparent);transition:text-decoration-color var(--dauer-kurz) linear}
body.sc-page .sc-foot nav a:hover{color:var(--papier);text-decoration-color:var(--holz);text-decoration-thickness:2px}
.sc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Typography helpers */
.sc-kicker{font-size:14px;font-weight:600;color:var(--sc-accent);margin:0 0 14px}
.sc-h1{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.05em;max-width:16ch}
.sc-h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.045em}
.sc-h3{font-size:clamp(20px,1.8vw,26px)}
.sc-lead{font-size:clamp(17px,1.3vw,20px);line-height:1.6;color:var(--sc-muted);max-width:34em}
.sc-muted{color:var(--sc-muted)}
.sc-small{font-size:13px;line-height:1.55}
.sc-num{font-variant-numeric:tabular-nums}
/* Buttons */
.sc-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:var(--sc-radius-sm);background:var(--sc-accent);color:var(--sc-accent-ink);font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s,border-color .2s}
.sc-button:hover{filter:brightness(.94);transform:translateY(-1px)}
.sc-button.is-secondary{background:#fff;color:var(--sc-ink);border-color:var(--sc-line-strong)}
.sc-button.is-secondary:hover{filter:none;background:var(--sc-soft)}
.sc-button.is-ghost{background:transparent;color:var(--sc-ink);border-color:transparent;padding:0 8px;min-height:40px;text-decoration:underline;text-underline-offset:4px}
.sc-button.is-ghost:hover{transform:none;filter:none;color:var(--sc-accent)}
.sc-button.is-small{min-height:38px;padding:0 14px;font-size:13px}
.sc-button.is-dark{background:var(--sc-ink);color:#fff}
.sc-link{color:var(--sc-ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--sc-line-strong);padding-bottom:2px}
.sc-link:hover{color:var(--sc-accent);border-color:var(--sc-accent)}
/* Surfaces */
.sc-card{background:#fff;border:1px solid var(--sc-line);border-radius:var(--sc-radius);padding:22px}
.sc-card.is-soft{background:var(--sc-soft);border-color:transparent}
.sc-card.is-raised{box-shadow:var(--sc-shadow);border-color:#ffffffb0}
.sc-panel-title{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.sc-panel-title h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sc-panel-title span{font-size:12px;color:var(--sc-muted)}
.sc-divider{border:0;border-top:1px solid var(--sc-line);margin:0}
/* KPIs */
.sc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--sc-line);border:1px solid var(--sc-line);border-radius:var(--sc-radius);overflow:hidden}
.sc-kpi{background:#fff;padding:18px 20px}
.sc-kpi span{display:block;font-size:12px;color:var(--sc-muted)}
.sc-kpi strong{display:block;font-size:clamp(22px,2.2vw,30px);font-weight:500;letter-spacing:-.04em;margin-top:6px;font-variant-numeric:tabular-nums}
.sc-kpi small{display:block;font-size:12px;color:var(--sc-muted);margin-top:6px}
/* Badges */
.sc-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;background:var(--sc-soft);color:var(--sc-ink);font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap}
.sc-badge.is-good{background:#e4f3ec;color:#1f5e44}
.sc-badge.is-warn{background:#fbeedb;color:#7a4a0f}
.sc-badge.is-bad{background:#fae4e2;color:#7d2a25}
.sc-badge.is-accent{background:color-mix(in srgb,var(--sc-accent) 14%,#fff);color:var(--sc-accent)}
/* Tables */
.sc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sc-table{width:100%;border-collapse:collapse;font-size:14px}
.sc-table th{text-align:left;font-size:12px;font-weight:600;color:var(--sc-muted);padding:10px 12px;border-bottom:1px solid var(--sc-line-strong);white-space:nowrap}
.sc-table td{padding:14px 12px;border-bottom:1px solid var(--sc-line);vertical-align:middle}
.sc-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-table tbody tr{transition:background .2s}
.sc-table tbody tr:hover{background:var(--sc-soft)}
.sc-table tbody tr.is-selected{background:color-mix(in srgb,var(--sc-accent) 9%,#fff)}
.sc-table-note{font-size:12px;color:var(--sc-muted);margin-top:10px}
/* Forms */
.sc-field{display:grid;gap:7px;font-size:14px;font-weight:600}
.sc-field>span small{font-weight:400;color:var(--sc-muted);margin-left:6px}
.sc-field input,.sc-field select,.sc-field textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid var(--sc-line-strong);border-radius:var(--sc-radius-sm);background:#fff;font-weight:400;font-size:15px}
.sc-field textarea{min-height:110px;resize:vertical}
.sc-field input:focus,.sc-field select:focus,.sc-field textarea:focus{border-color:var(--sc-accent);outline:3px solid color-mix(in srgb,var(--sc-accent) 25%,transparent);outline-offset:0}
.sc-field .sc-error{font-size:13px;color:var(--sc-bad);font-weight:400}
.sc-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.5}
.sc-check input{width:18px;height:18px;margin-top:3px;flex-shrink:0;accent-color:var(--sc-accent)}
.sc-choice{display:grid;gap:10px}
.sc-choice label{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--sc-line-strong);border-radius:var(--sc-radius-sm);cursor:pointer;font-weight:400;transition:border-color .2s,background .2s}
.sc-choice label:has(input:checked){border-color:var(--sc-accent);background:color-mix(in srgb,var(--sc-accent) 7%,#fff)}
.sc-choice input{accent-color:var(--sc-accent)}
/* Tabs */
.sc-tabs{display:flex;gap:4px;border-bottom:1px solid var(--sc-line);overflow-x:auto}
.sc-tabs button{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--sc-muted);white-space:nowrap}
.sc-tabs button[aria-selected=true]{color:var(--sc-ink);border-color:var(--sc-ink)}
.sc-tabs button:hover{color:var(--sc-ink)}
/* Steps / flow */
.sc-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:600}
.sc-steps>span{display:inline-flex;align-items:center;gap:8px;color:var(--sc-muted)}
.sc-steps>span b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--sc-line-strong);font-size:12px;font-weight:600;color:var(--sc-muted)}
.sc-steps>span.is-done b{background:var(--sc-ink);border-color:var(--sc-ink);color:#fff}
.sc-steps>span.is-active{color:var(--sc-ink)}
.sc-steps>span.is-active b{border-color:var(--sc-accent);color:var(--sc-accent)}
.sc-steps>i{flex:1;min-width:16px;height:1px;background:var(--sc-line-strong)}
/* Empty state and notes */
.sc-empty{padding:28px;border:1px dashed var(--sc-line-strong);border-radius:var(--sc-radius);text-align:center;color:var(--sc-muted);font-size:14px}
.sc-note{padding:14px 16px;border-left:3px solid var(--sc-accent);background:var(--sc-soft);border-radius:0 var(--sc-radius-sm) var(--sc-radius-sm) 0;font-size:14px}
.sc-note strong{display:block;margin-bottom:4px}
/* Toast and dialog */
.sc-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:60;background:var(--sc-ink);color:#fff;padding:12px 18px;border-radius:var(--sc-radius-sm);font-size:14px;box-shadow:var(--sc-shadow);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:min(92vw,520px)}
.sc-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.sc-toast[data-tone=good]{background:#1f5e44}.sc-toast[data-tone=warn]{background:#7a4a0f}.sc-toast[data-tone=bad]{background:#7d2a25}
.sc-dialog{border:0;border-radius:var(--sc-radius);padding:0;width:min(560px,94vw);max-height:92dvh;background:#fff;color:var(--sc-ink);box-shadow:0 40px 90px -30px #16212b66}
.sc-dialog::backdrop{background:#16212b80;backdrop-filter:blur(4px)}
.sc-dialog-head{display:flex;justify-content:space-between;align-items:start;gap:16px;padding:22px 24px 0}
.sc-dialog-head h3{font-size:20px}
.sc-dialog-body{padding:18px 24px 24px;display:grid;gap:16px}
.sc-dialog-foot{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:0 24px 24px}
.sc-close{background:none;border:0;font-size:22px;line-height:1;padding:4px 8px;color:var(--sc-muted)}
.sc-close:hover{color:var(--sc-ink)}
/* Sparkline */
.sc-spark{display:block;width:100%;height:auto}
.sc-spark-line{fill:none;stroke:var(--sc-accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sc-spark-area{fill:var(--sc-accent);opacity:.12}
/* Section rhythm */
.sc-section{padding:clamp(48px,7vw,96px) 0}
.sc-section.is-soft{background:var(--sc-soft)}
.sc-section-head{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:end;margin-bottom:clamp(28px,4vw,52px)}
.sc-section-head p{color:var(--sc-muted);font-size:17px;line-height:1.6;max-width:30em}
/* Motion rules */
@media(prefers-reduced-motion:reduce){.sc-page *,.sc-page *::before,.sc-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.motion-paused .sc-page *,.motion-paused .sc-page *::before,.motion-paused .sc-page *::after,html.motion-paused body.sc-page *{animation:none!important;transition:none!important}
@media(max-width:800px){.sc-section-head{grid-template-columns:1fr;gap:14px}}
@media(max-width:450px){.sc-card{padding:18px}.sc-kpi{padding:14px 16px}}
/* Ermeth-Leiste: schmaler werdend zuerst der Zusatz, dann das Wort am Pausenknopf; mobil zwei Zeilen
   (Wortmarke, «Alle Beispiele», Pause | Name des Betriebs, Kontaktknopf), nicht fest, damit die Demo Platz hat. */
@media(max-width:1279px){body.sc-page .sc-bar-label span{display:none}}
@media(max-width:1100px){body.sc-page .sc-motion{justify-content:center;gap:0;width:44px;padding:0;font-size:0;line-height:0}}
@media(max-width:960px){
 body.sc-page .sc-bar{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"logo . back pause" "label label cta cta";align-items:center;gap:4px 12px;min-height:0;padding:4px var(--fl-rand) 10px}
 body.sc-page .sc-bar-brand,body.sc-page .sc-bar-actions{display:contents}
 body.sc-page .sc-bar-logo{grid-area:logo}
 body.sc-page .sc-bar .logo-mark{width:104px}
 body.sc-page .sc-bar-back{grid-area:back;justify-self:end;padding-left:0;border-left:0}
 body.sc-page .sc-bar-back::after{left:0}
 body.sc-page .sc-motion{grid-area:pause;justify-self:end}
 body.sc-page .sc-bar-label{grid-area:label;justify-content:flex-start;text-align:left}
 body.sc-page .sc-bar-label strong{font-size:15px;line-height:1.25;text-wrap:pretty}
 body.sc-page .sc-bar-cta{grid-area:cta;justify-self:end;padding:0 16px}
 body.sc-page .sc-bar-cta::after{left:16px;right:16px}
}
/* Sprachumschalter in der Leiste (6. Oktober 2026, docs/i18n-demos.md §8): «English» auf /demo/<id>/, «Deutsch» auf /en/demo/<id>/.
   Dezenter Textlink wie .site-nav-lang der Website: Nebel, beim Zeigen Papier mit gezogener Linie in Holz. Breit vor dem Pausenknopf.
   Mobil (bis 960 px) die Leiste mit Umschalter als umbrechende Zeile statt Raster, damit der breite Kontaktknopf der zweiten Zeile die
   erste nicht auseinanderdrückt: erste Zeile Wortmarke | Umschalter, «Alle Beispiele», Pause; zweite Zeile Name des Betriebs | Kontaktknopf.
   Unter 360 px passt die erste Zeile nicht mehr: dort bleibt sie wie ohne Umschalter, der Umschalter steht rechtsbündig in einer dritten Zeile.
   Seiten ohne Umschalter (englische Demo noch nicht gebaut) behalten das Raster unverändert. */
body.sc-page .sc-bar-lang{display:inline-flex;align-items:center;flex:none}
body.sc-page .sc-bar-lang a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--nebel);font:400 16px/1.25 var(--sans);text-decoration:none;white-space:nowrap;transition:color var(--dauer-kurz) linear}
body.sc-page .sc-bar-lang a::after{content:'';position:absolute;left:0;right:0;bottom:8px;height:var(--linie-betont);background:var(--holz);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-mittel) var(--kurve-praezise)}
body.sc-page .sc-bar-lang a:hover{color:var(--papier)}
body.sc-page .sc-bar-lang a:hover::after{transform:scaleX(1)}
@media(max-width:960px){
 body.sc-page .sc-bar:has(.sc-bar-lang){display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-logo{order:0}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-lang{order:1;margin:0 4px 0 auto}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-back{order:2}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-motion{order:3}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-label{order:4;flex:1 0 calc(100% - 220px);min-width:0}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-cta{order:5;flex:none}
}
@media(max-width:400px){
 body.sc-page .sc-bar:has(.sc-bar-lang){column-gap:10px}
 body.sc-page .sc-bar:has(.sc-bar-lang) .logo-mark{width:96px}
}
@media(max-width:359px){
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-back{margin-left:auto}
 body.sc-page .sc-bar:has(.sc-bar-lang) .sc-bar-lang{order:6;flex:1 0 100%;justify-content:flex-end;margin:0}
 /* Ziel bleibt 44 px hoch wie jedes Bedienelement der Demos (vorher 32 px; Prüfung 6. Oktober 2026, scripts/test-website-r2.mjs bei 320 px). */
}
@media(max-width:800px){body.sc-page .sc-foot{flex-direction:column;align-items:flex-start;padding:40px var(--fl-rand) 48px}}
/* ---------------------------------------------------------------- Ermeth-Ebene in der Demo (Marke «Klartext»).
   Blau gibt es in der Marke nicht mehr: --fehab-blue bleibt nur als Alias auf Tinte für die Querverweise der Demo-Blätter. */
:root{--fehab-blue:var(--tinte);--fehab-blue-dark:var(--nacht)}
.sc-kicker-fehab{color:var(--grau)}
.sc-button.is-fehab{background:var(--tinte);color:var(--papier);border-radius:0}
.sc-button.is-fehab:hover{background:var(--tinte);filter:none}
/* Muster-Kennzeichnung (elemente.md §8): Schraffur in Kobalt und das Wort, nie in der Markenfarbe. */
.sc-page .muster-etikett{display:inline-flex;align-items:center;gap:10px;padding:5px 10px 5px 6px;background:var(--muster-flaeche);color:var(--muster);font:600 14px/1.2 var(--sans);letter-spacing:0;white-space:nowrap}
.sc-page .muster-etikett::before{content:'';width:26px;height:12px;flex:none;background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 5px);box-shadow:inset 0 0 0 1.5px var(--muster)}
/* Musterband unter der Leiste: Schraffurkante in Kobalt eröffnet den Muster-Rahmen um den fiktiven Betrieb.
   Darin die Kennzeichnung, die feste Demo-Uhr, Rückgängig und Zurücksetzen. */
body.sc-page .sc-strip{position:relative;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0 32px;padding:12px var(--fl-rand) 0;background:var(--papier);border-bottom:1px solid var(--linie);font:400 14px/1.45 var(--sans);letter-spacing:.005em;color:var(--grau)}
body.sc-page .sc-strip::before{content:'';position:absolute;inset:0 0 auto;height:8px;background:repeating-linear-gradient(135deg,var(--muster) 0 1.5px,transparent 1.5px 7px)}
body.sc-page .sc-strip p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 24px;margin:0}
body.sc-page .sc-strip-time{color:var(--tinte);font-weight:500}
body.sc-page .sc-strip-time time{font-weight:400}
body.sc-page .sc-strip-note{color:var(--grau)}
body.sc-page .sc-strip-actions{display:flex;gap:20px;flex-shrink:0}
body.sc-page .sc-strip .sc-button.is-ghost{min-height:44px;padding:0 2px;border:0;border-radius:0;background:none;color:var(--tinte);font:500 16px/1.2 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;transform:none;filter:none}
body.sc-page .sc-strip .sc-button.is-ghost:not(:disabled):hover{color:var(--tinte);text-decoration-color:var(--holz-kraeftig);text-decoration-thickness:2px}
body.sc-page .sc-strip .sc-button.is-ghost:disabled{opacity:1;color:var(--grau);text-decoration:none}
/* Englisch ist «Undo» nur 43.7 px breit; jedes Ziel im Musterband bleibt mindestens 44 × 44 px (die deutschen Knöpfe sind ohnehin breiter). */
body.sc-page .sc-strip .sc-button.is-ghost{min-width:44px}
/* Pakethinweis (einmal nach dem Aha-Moment): Linie in Tinte oben, Bildzeichen, Satz in Schibsted, Einstieg mit Richtpreis, Textlink. */
body.sc-page .sc-paket{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:4px 16px;padding:16px 20px 18px;border:0;border-top:var(--linie-kontur) solid var(--tinte);border-radius:0;background:var(--papier);color:var(--tinte);font:400 16px/1.55 var(--sans);letter-spacing:0;text-align:left}
body.sc-page .sc-paket-mark{display:block;width:20px;height:24px;margin:1px 0 0;border-radius:0;background:none;color:var(--tinte)}
body.sc-page .sc-paket-mark svg{display:block;width:20px;height:24px}
body.sc-page .sc-paket .sc-q{fill:var(--holz-kraeftig)}
body.sc-page .sc-paket p{grid-column:2;margin:0;color:var(--tinte);font:inherit}
body.sc-page .sc-paket strong{font-weight:600}
body.sc-page .sc-paket em{display:block;margin:4px 0 0;font:400 14px/1.45 var(--sans);font-style:normal;letter-spacing:.005em;color:var(--grau)}
body.sc-page .sc-paket a{grid-column:3;grid-row:1;align-self:center;display:inline;padding:12px 0;border:0;color:var(--tinte);font:600 16px/1.3 var(--sans);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;background:linear-gradient(var(--holz-kraeftig),var(--holz-kraeftig)) left bottom/0% 2px no-repeat;background-clip:content-box;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
body.sc-page .sc-paket a:hover{color:var(--tinte);background-size:100% 2px;text-decoration-color:transparent}
@media(max-width:640px){
 body.sc-page .sc-paket{grid-template-columns:20px minmax(0,1fr);padding:14px 16px 10px}
 body.sc-page .sc-paket-mark{margin-top:1px}
 body.sc-page .sc-paket a{grid-column:2;grid-row:auto;justify-self:start;white-space:normal}
}
/* Einordnung (Schluss der Demo, Nacht): was du berührt hast, je Einstieg als Zeile. Titel in Newsreader, Richtpreis in Newsreader,
   berührte Schritte mit Linie in Holz und dem Wort «ausprobiert», die zuletzt passende Zeile mit gezogener Linie oben (is-active). */
body.sc-page .sc-einordnung{padding:clamp(64px, 46px + 3.4vw, 96px) 0;background:var(--nacht);color:var(--papier);border:0;font:400 16px/1.55 var(--sans);letter-spacing:0}
body.sc-page .sc-ein-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:16px;align-items:end;margin:0 0 48px}
body.sc-page .sc-ein-head>div{grid-column:1/span 6}
body.sc-page .sc-ein-kicker{display:flex;align-items:center;gap:12px;margin:0 0 20px;font:500 16px/1.45 var(--sans);color:var(--nebel)}
body.sc-page .sc-einordnung .sc-bildzeichen{display:block;flex:none;color:var(--papier)}
body.sc-page .sc-einordnung .sc-q{fill:var(--holz)}
body.sc-page .sc-einordnung .sc-ein-title{margin:0;font:500 var(--fs-h2)/1.12 var(--serif);letter-spacing:-.018em;font-optical-sizing:auto;color:var(--papier);text-wrap:balance}
body.sc-page .sc-ein-intro{grid-column:7/-1;margin:0;max-width:34em;font:400 var(--fs-lead)/1.5 var(--sans);letter-spacing:-.005em;color:var(--papier)}
body.sc-page .sc-einordnung-grid{display:block;border:0;border-top:var(--linie-kontur) solid var(--papier);border-radius:0;background:none;overflow:visible}
body.sc-page .sc-einordnung-col{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:20px;align-items:start;padding:32px 0 36px;border-bottom:1px solid var(--linie-dunkel);background:none}
body.sc-page .sc-einordnung-col::before{content:'';position:absolute;left:0;right:0;top:-1.5px;height:var(--linie-betont);background:var(--holz);transform:scaleX(0);transform-origin:left center;transition:transform var(--dauer-linie) var(--kurve-linie)}
body.sc-page .sc-einordnung-col+.sc-einordnung-col::before{top:-1px}
body.sc-page .sc-einordnung-col.is-active::before{transform:scaleX(1)}
body.sc-page .sc-ein-name{grid-column:1/span 4}
body.sc-page .sc-ein-body{grid-column:5/span 5}
body.sc-page .sc-ein-side{grid-column:10/-1;display:grid;gap:12px;justify-items:start;align-content:start}
body.sc-page .sc-einordnung-tier{margin:0 0 8px;font:400 14px/1.45 var(--sans);letter-spacing:.005em;color:var(--nebel)}
body.sc-page .sc-einordnung-col h3{margin:0;max-width:16em;font:600 var(--fs-h3)/1.3 var(--sans);letter-spacing:-.01em;color:var(--papier);text-wrap:balance}
body.sc-page .sc-ein-body>p:first-child{margin:0 0 24px;max-width:36em;color:var(--papier)}
body.sc-page .sc-ein-steps-label{margin:0 0 8px;font:400 14px/1.45 var(--sans);letter-spacing:.005em;color:var(--nebel)}
body.sc-page .sc-einordnung-steps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--linie-dunkel);font-size:16px}
body.sc-page .sc-einordnung-steps li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--linie-dunkel);color:var(--nebel);line-height:1.45}
body.sc-page .sc-einordnung-steps li span{position:relative;top:-.3em;flex:none;width:16px;height:1.5px;border:0;border-radius:0;background:var(--linie-dunkel)}
body.sc-page .sc-einordnung-steps li.is-touched{color:var(--papier)}
body.sc-page .sc-einordnung-steps li.is-touched span{height:2px;background:var(--holz)}
body.sc-page .sc-einordnung-steps li.is-touched span::after{content:none}
body.sc-page .sc-einordnung-steps li.is-touched::after{content:'ausprobiert';margin-left:auto;padding-left:16px;font-size:14px;letter-spacing:.005em;color:var(--nebel);white-space:nowrap}
/* Englische Demos (docs/i18n-demos.md): derselbe Vermerk auf Englisch, für alle vier Demos (Wortlaut wie in der Website-Demo). */
html[lang|=en] body.sc-page .sc-einordnung-steps li.is-touched::after{content:'tried'}
body.sc-page .sc-einordnung-price{margin:0;padding:0;border:0}
body.sc-page .sc-einordnung-price small{display:block;font:400 14px/1.45 var(--sans);letter-spacing:.005em;color:var(--nebel)}
body.sc-page .sc-einordnung-price strong{display:block;margin-top:4px;font:500 clamp(28px, 24px + 1vw, 36px)/1.1 var(--serif);letter-spacing:-.018em;font-optical-sizing:auto;font-variant-numeric:lining-nums;color:var(--papier);white-space:nowrap}
body.sc-page .sc-einordnung-price.is-open strong{font-size:clamp(24px, 22px + .5vw, 28px)}
body.sc-page .sc-ein-link{display:inline;padding:12px 0;border:0;color:var(--papier);font:600 16px/1.3 var(--sans);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;background:linear-gradient(var(--holz),var(--holz)) left bottom/0% 2px no-repeat;background-clip:content-box;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dauer-mittel) var(--kurve-praezise),text-decoration-color var(--dauer-kurz) linear}
body.sc-page .sc-ein-link:hover{color:var(--papier);background-size:100% 2px;text-decoration-color:transparent}
body.sc-page .sc-ein-notes{display:grid;gap:12px;max-width:68ch;margin-top:32px}
body.sc-page .sc-ein-notes p{margin:0;color:var(--nebel)}
body.sc-page .sc-ein-notes strong{font-weight:600;color:var(--papier)}
@media(max-width:900px){
 body.sc-page .sc-ein-head>div,body.sc-page .sc-ein-intro{grid-column:1/-1}
 body.sc-page .sc-ein-head{margin-bottom:32px}
 body.sc-page .sc-einordnung-col{row-gap:16px;padding:24px 0 28px}
 body.sc-page .sc-ein-name,body.sc-page .sc-ein-body,body.sc-page .sc-ein-side{grid-column:1/-1}
 body.sc-page .sc-ein-side{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 16px;width:100%}
}
/* Mobile tablist for two-sided demos (customer | business) */
.sc-tablist{display:none;gap:4px;padding:4px;background:var(--sc-soft);border-radius:999px;border:1px solid var(--sc-line)}
.sc-tablist [role=tab]{flex:1;min-height:40px;border:0;border-radius:999px;background:transparent;font-size:14px;font-weight:600;color:var(--sc-muted);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.sc-tablist [role=tab][aria-selected=true]{background:#fff;color:var(--sc-ink);box-shadow:0 1px 3px #16212b14}
.sc-tab-dot{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sc-accent);color:var(--sc-accent-ink);font-size:11px}
.sc-tab-dot[hidden]{display:none}
@media(max-width:900px){.sc-tablist{display:flex}}
/* Phone frame for the customer view */
.sc-phone{width:min(390px,100%);margin:0 auto;border:1px solid var(--sc-line-strong);border-radius:28px;background:#fff;box-shadow:var(--sc-shadow);overflow:hidden;position:relative}
.sc-phone-screen{max-height:min(720px,78vh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.sc-phone-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;font-size:12px;color:var(--sc-muted);background:#fff;border-bottom:1px solid var(--sc-line)}
.sc-phone-dock{position:sticky;bottom:0;display:flex;gap:10px;padding:12px;background:#ffffffee;border-top:1px solid var(--sc-line);backdrop-filter:blur(8px)}
.sc-phone-dock .sc-button{flex:1;min-height:44px;font-size:14px}
@media(max-width:900px){.sc-phone{border-radius:16px;box-shadow:none}.sc-phone-screen{max-height:none}}
/* Documents: offer, invoice, delivery note (A4-like, printable) */
.sc-doc{background:#fff;color:#16212b;border:1px solid var(--sc-line);border-radius:var(--sc-radius-sm);padding:clamp(20px,4vw,48px);max-width:800px;margin:0 auto;font-size:14px;line-height:1.5;position:relative;overflow:hidden}
.sc-doc-head{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:28px}
.sc-doc-head h2,.sc-doc-head h3{font-size:22px;letter-spacing:-.03em}
.sc-doc-address{font-size:14px;line-height:1.55;white-space:pre-line}
.sc-doc-meta{display:grid;grid-template-columns:auto auto;gap:4px 18px;font-size:13px;color:var(--sc-muted)}
.sc-doc-meta dt{margin:0}.sc-doc-meta dd{margin:0;color:#16212b;font-variant-numeric:tabular-nums}
.sc-doc table{width:100%;border-collapse:collapse;margin:18px 0}
.sc-doc th{text-align:left;font-size:12px;font-weight:600;color:var(--sc-muted);border-bottom:1px solid var(--sc-line-strong);padding:8px 6px}
.sc-doc td{padding:10px 6px;border-bottom:1px solid var(--sc-line);vertical-align:top}
.sc-doc .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sc-doc-totals{margin-left:auto;width:min(360px,100%);display:grid;grid-template-columns:1fr auto;gap:6px 18px;font-size:14px;font-variant-numeric:tabular-nums}
.sc-doc-totals strong{font-size:17px}
.sc-doc-totals .is-total{border-top:1px solid var(--sc-line-strong);padding-top:8px;margin-top:4px}
.sc-doc-note{font-size:12px;color:var(--sc-muted);margin-top:18px;line-height:1.6}
.sc-doc-badge{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--sc-line-strong);border-radius:4px;font-size:11px;font-weight:600;color:var(--sc-muted);text-transform:none}
.sc-watermark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-size:clamp(22px,4vw,44px);font-weight:700;letter-spacing:.08em;color:#b3362f1f;transform:rotate(-24deg);white-space:nowrap}
/* Swiss QR-bill payment part (Zahlteil) as a labelled sample. 210 mm wide, 105 mm high; here in CSS px at 96 dpi scaled by width. */
.sc-qrbill{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,148fr);border-top:1px dashed #16212b;margin-top:24px;background:#fff;color:#000;font-family:Arial,Helvetica,'Liberation Sans',sans-serif;font-size:10px;line-height:1.35;position:relative}
.sc-qrbill>div{padding:12px 10px}
.sc-qrbill-receipt{border-right:1px dashed #16212b}
.sc-qrbill h4{font-size:11px;font-weight:700;margin:0 0 10px;letter-spacing:0}
.sc-qrbill h5{font-size:8px;font-weight:700;margin:8px 0 2px;letter-spacing:0}
.sc-qrbill p{margin:0;font-size:9px;white-space:pre-line}
.sc-qrbill-pay{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.sc-qrbill-code{width:148px;height:148px;position:relative;display:grid;place-items:center}
.sc-qrbill-code svg{width:100%;height:100%;display:block}
.sc-qrbill-cross{position:absolute;width:22px;height:22px;background:#000;display:grid;place-items:center}
.sc-qrbill-cross::before{content:'';width:4px;height:14px;background:#fff;box-shadow:0 0 0 0 #000}
.sc-qrbill-cross::after{content:'';position:absolute;width:14px;height:4px;background:#fff}
.sc-qrbill-amount{display:flex;gap:16px;margin-top:10px}
.sc-qrbill-amount b{display:block;font-size:8px}
.sc-qrbill-amount span{font-size:10px;font-variant-numeric:tabular-nums}
.sc-qrbill-sample{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sc-qrbill-sample span{transform:rotate(-18deg);font-size:clamp(14px,2.4vw,24px);font-weight:700;letter-spacing:.06em;color:#b3362f;background:#ffffffd9;padding:6px 14px;border:2px solid #b3362f;border-radius:4px}
@media(max-width:600px){.sc-qrbill{grid-template-columns:1fr}.sc-qrbill-receipt{border-right:0;border-bottom:1px dashed #16212b}.sc-qrbill-pay{grid-template-columns:1fr}.sc-qrbill-code{width:132px;height:132px}}
@media print{.sc-bar,.sc-strip,.sc-foot,.sc-toast,.sc-paket,.sc-einordnung,.all-motion,[data-sc-no-print]{display:none!important}body.sc-page{background:#fff}.sc-doc{border:0;padding:0;max-width:none;box-shadow:none}@page{size:A4;margin:15mm}}
/* Musterband mobil: Etikett kurz («Muster») neben der Demo-Uhr, darunter Rückgängig und Zurücksetzen; der Satz zum Browser-Tab steht im Fuss. */
@media(max-width:960px){
 body.sc-page .sc-strip{gap:0 16px;padding-top:12px}
 body.sc-page .sc-strip p{gap:4px 12px}
 body.sc-page .sc-strip-note{display:none}
}
@media(max-width:640px){body.sc-page .sc-muster-lang{display:none}body.sc-page .sc-strip-actions{width:100%}}

/* Payment part details requested by the demo builders */
.sc-qrbill{max-width:794px;margin-left:auto;margin-right:auto}
.sc-qrbill-accept{text-align:right;margin-top:8px;font-size:8px;font-weight:700}
.sc-qrbill-left,.sc-qrbill-info{min-width:0}
.sc-qrbill-info{display:grid;gap:4px;align-content:start}