/* E-Rechnung aus PDF. Concept: your paper invoice gets its official stamp. Tokens: see the design skill. */
@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces.woff2) format('woff2-variations'), url(/fonts/fraunces.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Source Sans 3'; src: url(/fonts/source-sans-3.woff2) format('woff2-variations'), url(/fonts/source-sans-3.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Plex Mono'; src: url(/fonts/plex-mono-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
/* metric-matched fallbacks so the swap doesn't shift the layout */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'), local('DejaVu Serif'); size-adjust: 103%; ascent-override: 95%; descent-override: 25%; }
@font-face { font-family: 'Source Sans Fallback'; src: local('Arial'), local('Liberation Sans'), local('DejaVu Sans'); size-adjust: 92%; ascent-override: 102%; descent-override: 28%; }

:root {
	--ink: #1b2533;
	--ink-soft: #435064;
	--muted: #5a6474;
	--brand: #1f3f6b;
	--brand-dark: #142c4d;
	--brand-tint: #e9eef6;
	--accent: #c2410c;
	--ok: #1d6b45;
	--ok-tint: #e3f1e8;
	--bad: #a3261d;
	--bad-tint: #fbe7e4;
	--warn: #7a4a00;
	--warn-tint: #fdf2dc;
	--paper: #f5f2eb;
	--card: #fffdf8;
	--line: #ddd6c8;
	--line-strong: #b9ae98;
	--tint: #ebe5d8;

	--fs-xs: 13px;
	--fs-sm: 15px;
	--fs-base: 17px;
	--fs-lg: 21px;
	--fs-xl: 27px;
	--fs-2xl: 34px;
	--fs-3xl: 56px;

	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
	--r-sm: 6px;
	--r: 12px;
	--shadow-sm: 0 1px 1px rgba(27, 37, 51, .05), 0 2px 4px rgba(27, 37, 51, .05);
	--shadow-paper: 0 1px 1px rgba(27, 37, 51, .06), 0 2px 4px rgba(27, 37, 51, .06), 0 8px 16px rgba(27, 37, 51, .07), 0 24px 48px rgba(31, 63, 107, .10);
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	--serif: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
	--sans: 'Source Sans 3', 'Source Sans Fallback', system-ui, sans-serif;
	--mono: 'Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; min-height: 100svh; background: var(--paper); color: var(--ink); font: 400 var(--fs-base)/1.6 var(--sans); font-synthesis: none; -webkit-font-smoothing: antialiased; }
::selection { background: #c9d7ec; color: var(--ink); }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 var(--s4); text-wrap: balance; font-variation-settings: 'opsz' 72; }
h1 { font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -.025em; font-weight: 700; }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: 1.25; }
p { margin: 0 0 var(--s4); text-wrap: pretty; }
.nowrap { white-space: nowrap; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }
.wrap.narrow > * { max-width: 760px; }

/* header / footer */
.top { border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, .85); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 64px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: var(--s3); font-family: var(--serif); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.logo svg { flex: none; }
.nav { display: flex; gap: var(--s5); flex-wrap: wrap; font-size: var(--fs-sm); }
.nav a { color: var(--ink-soft); text-decoration: none; padding: var(--s3) 0; }
.nav a[aria-current] { color: var(--brand); font-weight: 600; }
.foot { border-top: 1px solid var(--line); margin-top: var(--s9); padding: var(--s6) 0 var(--s7); color: var(--muted); font-size: var(--fs-sm); }
.foot .wrap { display: flex; gap: var(--s5); justify-content: space-between; flex-wrap: wrap; }
.foot nav { display: flex; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.foot a { color: var(--ink-soft); display: inline-block; padding: var(--s2) 0; }

/* hero: the paper invoice, its XML sheet and the stamp */
.hero { position: relative; padding: var(--s7) 0 var(--s7); overflow: hidden; }
.hero::before { /* atmosphere: two soft glows behind everything */
	content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	-webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
	background:
		radial-gradient(640px 420px at 82% 30%, rgba(31, 63, 107, .10), transparent 70%),
		radial-gradient(520px 360px at 8% 100%, rgba(194, 65, 12, .07), transparent 70%);
}
.kicker { display: inline-flex; align-items: center; gap: var(--s2); font: 500 var(--fs-xs)/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s4); }
.kicker::before { content: ''; width: 10px; height: 10px; background: linear-gradient(225deg, transparent 50%, var(--accent) 50%); }
.h1-2 { color: var(--brand); display: block; }
.lead { font-size: var(--fs-lg); line-height: 1.5; color: var(--ink-soft); max-width: 32em; margin-bottom: var(--s5); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s7); align-items: start; }
.trust { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-soft); }
.trust li { display: flex; align-items: center; gap: var(--s2); }
.trust svg { flex: none; }

.stage { position: relative; height: 664px; margin-top: var(--s5); }
.sheet { position: absolute; background: var(--card); border: 1px solid rgba(27, 37, 51, .08); border-radius: var(--r); box-shadow: var(--shadow-paper); }
.sheet.fold { clip-path: polygon(0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100%); }
.sheet.fold::after { content: ''; position: absolute; top: 0; right: 0; width: 36px; height: 36px; background: linear-gradient(225deg, transparent 50%, #e7dfcf 50%); border-bottom-left-radius: var(--r-sm); box-shadow: -2px 2px 4px rgba(27, 37, 51, .08); }
.sheet-xml { top: 0; right: 0; width: 330px; padding: var(--s5) var(--s5) var(--s6); transform: rotate(3deg); background: #f3f6fb; font: 500 12px/1.75 var(--mono); color: #4a5b74; white-space: pre; overflow: hidden; }
.sheet-xml b { color: var(--brand); font-weight: 500; }
.sheet-xml .file { display: block; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.sheet-pdf { left: 0; top: 132px; width: 360px; padding: var(--s6) var(--s6) var(--s5); transform: rotate(-2deg); font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-soft); }
.sheet-pdf .from { font-family: var(--serif); font-weight: 700; font-size: var(--fs-lg); color: var(--ink); margin-bottom: var(--s5); }
.sheet-pdf .meta { display: flex; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.sheet-pdf .meta b { display: block; color: var(--ink); font-weight: 600; }
.sheet-pdf h3 { font-size: var(--fs-lg); margin-bottom: var(--s3); }
.sheet-pdf table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sheet-pdf td { padding: var(--s1) 0; border-bottom: 1px solid var(--tint); }
.sheet-pdf td:last-child { text-align: right; white-space: nowrap; }
.sheet-pdf .pay { margin: var(--s5) 0 var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line); font-size: var(--fs-xs); color: var(--muted); }
.sheet-pdf tr.sum td { border: 0; padding-top: var(--s2); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); }
.stamp-big { position: absolute; left: 244px; top: 476px; display: grid; place-items: center; text-align: center; width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--ok); color: var(--ok); background: rgba(227, 241, 232, .82); transform: rotate(-12deg); font: 500 var(--fs-xs)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 5px rgba(227, 241, 232, .82), inset 0 0 0 6px var(--ok); }
.stamp-big b { display: block; font: 700 var(--fs-lg)/1.1 var(--serif); letter-spacing: 0; text-transform: none; margin: var(--s1) 0; }
.chip { position: absolute; left: -8px; bottom: 0; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); border-radius: 999px; background: var(--card); color: var(--ink); border: 1px solid rgba(27, 37, 51, .15); font: 500 var(--fs-xs)/1.4 var(--mono); box-shadow: var(--shadow-sm); }

/* one orchestrated entrance: sheets settle, then the stamp lands */
@media (prefers-reduced-motion: no-preference) {
	.sheet-xml { animation: settle-r .7s var(--ease-out) .05s both; }
	.sheet-pdf { animation: settle-l .7s var(--ease-out) .12s both; }
	.stamp-big { animation: stamp .45s var(--ease-out) .55s both; }
	.chip { animation: fade-up .5s var(--ease-out) .8s both; }
}
@keyframes settle-r { from { opacity: 0; transform: translateY(16px) rotate(6deg); } }
@keyframes settle-l { from { opacity: 0; transform: translateY(24px) rotate(-5deg); } }
@keyframes stamp { from { opacity: 0; transform: scale(1.25) rotate(-12deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* cards, drop zone */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); padding: var(--s5); }
.drop { display: block; position: relative; border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--card); padding: var(--s5); text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; box-shadow: var(--shadow-sm); }
@media (hover: hover) { .drop:hover { border-color: var(--brand); background: #f6f8fc; } }
.drop.over { border-color: var(--brand); background: #f6f8fc; }
.drop strong { display: block; font-size: var(--fs-lg); font-weight: 700; margin: var(--s2) 0 var(--s1); color: var(--ink); }
.drop small { color: var(--muted); font-size: var(--fs-sm); }
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.drop .cta { display: flex; width: fit-content; margin-left: auto; margin-right: auto; align-items: center; gap: var(--s2); margin-top: var(--s4); padding: var(--s3) var(--s5); border-radius: var(--r-sm); background: var(--brand); color: #fff; font-weight: 700; font-size: var(--fs-base); transition: background-color .15s ease, transform .12s ease; }
@media (hover: hover) { .drop:hover .cta { background: var(--brand-dark); } }
.drop:active .cta { transform: scale(.97); }
.sample { margin: var(--s3) 0 0; font-size: var(--fs-sm); color: var(--muted); }
.sample button { background: none; border: 0; color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-weight: 600; padding: var(--s3) 0; min-height: 44px; }
@media (hover: hover) { .sample button:hover { color: var(--brand-dark); text-decoration-thickness: 2px; } }

/* stamp: the "geprüft" mark */
.stamp { display: inline-flex; align-items: center; gap: var(--s2); border: 2px solid currentColor; border-radius: var(--r-sm); padding: var(--s1) var(--s3); font: 500 var(--fs-xs)/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }
.stamp.ok { color: var(--ok); background: var(--ok-tint); }
.stamp.bad { color: var(--bad); background: var(--bad-tint); }

/* steps: numbered paper slips with the folded corner */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); counter-reset: step; }
.steps li { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); box-shadow: var(--shadow-sm); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.steps li::after { content: ''; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: linear-gradient(225deg, transparent 50%, var(--accent) 50%); opacity: .85; }
.steps b { display: block; font: 500 var(--fs-xs)/1 var(--mono); letter-spacing: .08em; color: var(--muted); margin-bottom: var(--s3); }
.steps h3 { margin-bottom: var(--s2); }
.steps p { margin: 0; color: var(--ink-soft); }
.steps.compact { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s5); }
.steps.compact li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); padding: var(--s3) var(--s4); }
.steps.compact b { margin: 5px 0 0; }

/* sections */
section, section.wrap { padding-top: var(--s9); }
.band { background: var(--brand-dark); color: var(--brand-tint); padding: var(--s7) 0; margin-top: var(--s8); }
.band h2 { color: #fff; }
.band a { color: #fff; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { padding: 0 0 var(--s5) var(--s5); position: relative; color: var(--ink-soft); }
.timeline li::before { content: ''; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brand); }
.timeline li:last-child::before { background: var(--brand); }
.timeline time { font: 500 var(--fs-sm)/1.4 var(--mono); color: var(--ink); display: block; margin-bottom: var(--s1); }
details { border-bottom: 1px solid var(--line); padding: var(--s4) 0; }
summary { cursor: pointer; font-weight: 600; font-size: var(--fs-lg); line-height: 1.4; padding: var(--s1) var(--s6) var(--s1) 0; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 0; top: var(--s1); font: 500 var(--fs-lg)/1.4 var(--mono); color: var(--brand); }
details[open] summary::after { content: '–'; }
@media (hover: hover) { summary:hover { color: var(--brand); } }
details p { margin: var(--s3) 0 0; color: var(--ink-soft); max-width: 65ch; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.6em; }
.prose li { margin-bottom: .4em; }
.callout { background: var(--brand-tint); border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s4) var(--s5); margin: var(--s6) 0; }
.callout p { margin: 0; }
.prose h1, .prose h2 { hyphens: auto; overflow-wrap: break-word; }
table.simple { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--s4) 0 var(--s5); font-variant-numeric: tabular-nums; }
table.simple th, table.simple td { text-align: left; border-bottom: 1px solid var(--line); padding: var(--s2) var(--s2); vertical-align: top; }

/* the converter form */
.app { margin-top: var(--s6); scroll-margin-top: var(--s5); }
.app[hidden] { display: none; }
.form-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); padding: var(--s4) var(--s5) var(--s2); margin: 0 0 var(--s4); min-width: 0; }
legend { font-family: var(--serif); font-weight: 700; font-size: var(--fs-lg); padding: 0 var(--s2); }
.fields { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3) var(--s4); }
.f { display: flex; flex-direction: column; gap: var(--s1); grid-column: span 3; min-width: 0; }
.f.s2 { grid-column: span 2; }
.f.s4 { grid-column: span 4; }
.f.s6 { grid-column: span 6; }
label, .lbl { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
input, select, textarea { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid #b3aa98; border-radius: var(--r-sm); padding: var(--s2) var(--s3); min-height: 44px; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.lbl.gap { margin-top: var(--s3); }
input.prefilled { background: #f5f8fc; }
.radio { display: flex; gap: var(--s3); flex-wrap: wrap; margin: var(--s1) 0 var(--s3); }
.radio label { display: flex; gap: var(--s2); align-items: flex-start; border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3); cursor: pointer; background: #fff; font-weight: 400; color: var(--ink); flex: 1 1 220px; }
.radio label:has(input:checked) { border-color: var(--brand); background: #f1f5fb; }
.radio input { width: auto; min-height: 0; margin-top: var(--s1); }
.check { display: flex; gap: var(--s2); align-items: center; font-weight: 400; color: var(--ink-soft); font-size: var(--fs-sm); margin: var(--s2) 0 var(--s3); }
.check input { width: auto; min-height: 0; }
.lines { width: 100%; border-collapse: collapse; }
.lines th { font-size: var(--fs-xs); text-align: left; color: var(--ink-soft); padding: 0 var(--s2) var(--s2) 0; }
.lines td { padding: 0 var(--s2) var(--s2) 0; vertical-align: top; }
.lines .num { width: 88px; }
.lines .unit { width: 128px; }
.lines .price { width: 120px; }
.lines .rate { width: 88px; }
.lines .sum { width: 112px; text-align: right; padding-top: var(--s3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lines .del { width: 48px; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: var(--r-sm); width: 44px; height: 44px; cursor: pointer; color: var(--muted); font-size: var(--fs-lg); transition: color .15s ease, border-color .15s ease; }
@media (hover: hover) { .icon-btn:hover { color: var(--bad); border-color: var(--bad); } }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; font-weight: 700; border-radius: var(--r-sm); padding: var(--s3) var(--s5); min-height: 48px; cursor: pointer; border: 2px solid var(--brand); background: var(--brand); color: #fff; text-decoration: none; transition: background-color .15s ease, transform .12s ease; }
@media (hover: hover) { .btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); } }
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--brand); }
@media (hover: hover) { .btn.ghost:hover { background: #eef2f8; } }
.btn[disabled] { opacity: .6; cursor: progress; }
.totals { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s5); max-width: 360px; margin-left: auto; font-variant-numeric: tabular-nums; }
.totals .g { font-weight: 700; border-top: 1px solid var(--line); padding-top: var(--s2); }
.compare { margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.compare.ok { background: var(--ok-tint); color: var(--ok); }
.compare.bad { background: var(--warn-tint); color: var(--warn); }
.submit-row { display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; justify-content: space-between; margin-top: var(--s2); }
.msg { border-radius: var(--r); padding: var(--s4); margin: var(--s4) 0; }
.msg.err { background: var(--bad-tint); color: var(--bad); }
.msg.ok { background: var(--ok-tint); color: var(--ok); }
.msg ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.result-list { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s2); }
.result-list li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: var(--r-sm); padding: var(--s2) var(--s3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.result-list li.warning { border-left-color: #c58a12; }
.viewer { width: 100%; height: 75vh; min-height: 520px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-top: var(--s4); }
.spinner { width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.drop .spinner { border-color: #c9d4e4; border-top-color: var(--brand); margin: 0 auto; width: 28px; height: 28px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } * { transition: none !important; } }
#result:not(:empty) { margin-bottom: var(--s7); }

@media (max-width: 960px) {
	.hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
	.stage { height: 480px; max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 860px) {
	.grid2, .grid3, .steps { grid-template-columns: 1fr; }
	.f, .f.s2, .f.s4 { grid-column: span 6; }
	.lines thead { display: none; }
	.lines, .lines tbody, .lines tr, .lines td { display: block; width: 100% !important; }
	.lines tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s3) var(--s1); margin-bottom: var(--s3); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s2); }
	.lines td { padding: 0 0 var(--s2); }
	.lines td.desc { grid-column: span 2; }
	.lines td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--ink-soft); margin-bottom: 2px; }
	.lines .sum { text-align: left; padding-top: 0; }
}
@media (max-width: 600px) {
	:root { --fs-3xl: 38px; --fs-2xl: 27px; }
	.hero { padding-top: var(--s7); }
	section, section.wrap { padding-top: var(--s8); }
	.lead { font-size: var(--fs-base); }
	.stage { height: 540px; }
	.top .wrap { padding-top: var(--s2); padding-bottom: var(--s2); }
	.sheet-xml { width: 240px; padding: var(--s4); font-size: 10px; }
	.sheet-pdf { width: 290px; top: 72px; padding: var(--s5) var(--s4) var(--s4); }
	.sheet-pdf .from { font-size: var(--fs-base); margin-bottom: var(--s4); }
	.stamp-big { width: 116px; height: 116px; left: auto; right: 0; top: 376px; }
	.stamp-big b { font-size: var(--fs-base); }
	.chip { left: 0; bottom: 0; font-size: var(--fs-xs); }
	.nav { gap: var(--s4); }
}
.page-top { padding-top: var(--s9); }