/* =========================================================
   Fushi · Base: Reset, Typografie, Layout-Helfer
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: 0.01em; color: var(--c-text); }
h1 { font-size: clamp(var(--fs-2xl), 4.5vw, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl)); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); font-family: var(--f-body); font-weight: 700; }
p { margin: 0; }
p + p { margin-top: var(--space-3); }
a { color: var(--c-primary); text-decoration: none; }
a:hover { color: var(--c-accent); }
small, .small { font-size: var(--fs-sm); color: var(--c-text-2); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--space-6) 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--c-primary); color: #fff; }

.eyebrow { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-3); }
.lead { font-size: var(--fs-md); color: var(--c-text-2); }
.muted { color: var(--c-text-3); }
.price { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.mono { font-family: var(--f-mono); font-size: var(--fs-sm); }

.container { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--w-narrow); }
.section { padding-block: var(--space-10); }
.stack > * + * { margin-top: var(--space-4); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* Skip-Link */
.skip-link { position: absolute; left: var(--space-4); top: -60px; background: var(--c-primary-strong); color: #fff; padding: var(--space-2) var(--space-4); border-radius: var(--r-md); z-index: 200; transition: top var(--t-fast); }
.skip-link:focus { top: var(--space-4); }

/* Seigaiha-Wellenmuster (traditionelles Muster, hier als SVG-Textur) */
.waves {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40'%3E%3Cg fill='none' stroke='%234c8dff' stroke-opacity='.18' stroke-width='1.4'%3E%3Cpath d='M0 40a40 40 0 0 1 80 0M8 40a32 32 0 0 1 64 0M16 40a24 24 0 0 1 48 0M24 40a16 16 0 0 1 32 0M32 40a8 8 0 0 1 16 0'/%3E%3Cpath d='M-40 40a40 40 0 0 1 80 0M-32 40a32 32 0 0 1 64 0M-24 40a24 24 0 0 1 48 0M-16 40a16 16 0 0 1 32 0M-8 40a8 8 0 0 1 16 0' transform='translate(0 -20)'/%3E%3Cpath d='M40 40a40 40 0 0 1 80 0M48 40a32 32 0 0 1 64 0M56 40a24 24 0 0 1 48 0M64 40a16 16 0 0 1 32 0M72 40a8 8 0 0 1 16 0' transform='translate(0 -20)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 40px;
}