/* ============================================================
   gunBOX — shared layout & components (B3 · Stahlblau dominant)
   Loaded after tokens.css. Page chrome + every section pattern,
   lifted out of the prototype's page-local <style> blocks.
   ============================================================ */

:root {
  --steel-deep: #2A4865;
  --steel-mid:  #3A5A7C;
  --steel-soft: #6C89AB;
  --steel-tint: #DDE5EF;
  --util-bg:    #1B3148;
  /* accessible muted text on the dark steel surfaces (≥4.5:1 on #1B3148/#1F3850/#2A4865) */
  --on-steel:   #A6BCD8;
}

html, body { background: var(--paper); }
.page { width: 100%; max-width: 1440px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ───── NAV ───── */
nav.main { background: var(--steel-deep); color: var(--paper); position: relative; }
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 22px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-inner .gb-logo { color: var(--paper); }
.nav-inner .gb-logo .gb-mark { width: 30px; height: 30px; }
.nav-inner .gb-logo .gb-word { font-size: 24px; }
.foot-grid .gb-logo .gb-mark { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font: 500 14px/1 var(--sans); color: #C2D2E4; position: relative; padding: 4px 0; }
.nav-links a:hover { color: var(--paper); text-decoration: none; }
.nav-links a.active { color: var(--paper); }
.nav-links a.active::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background: var(--steel-soft); }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.nav-actions .lang { font: 500 12px/1 var(--mono); color: var(--on-steel); letter-spacing: 0.08em; }
.nav-actions .lang b { color: var(--paper); font-weight: 500; }
.nav-actions .lang .muted, .nav-mobile .lang .muted { color: var(--on-steel); }
.nav-actions .btn { background: var(--paper); color: var(--steel-deep); }
.nav-actions .btn:hover { background: var(--white); }

/* theme toggle — sits on the steel nav; --paper stays light so the icon is light in both modes */
.theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; color: var(--paper); cursor: pointer; flex: 0 0 auto; opacity: 0.85; transition: opacity 120ms ease; }
.theme-toggle:hover { opacity: 1; }
/* one icon, three states: the disc is always shown. Rays radiate out for light and
   retract into the disc for dark; auto (follow the OS) fills half the disc.
   Hover previews the next state in the cycle light → dark → auto. */
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .rays { transform-box: fill-box; transform-origin: center; transition: opacity 280ms ease, transform 280ms cubic-bezier(.34,1.56,.64,1); }
.theme-toggle .half { opacity: 0; transition: opacity 280ms ease; }
/* light = rays out; dark & auto = rays retracted into the disc; auto = half-filled disc */
html[data-theme-mode="dark"] .theme-toggle .rays,
html[data-theme-mode="auto"] .theme-toggle .rays { opacity: 0; transform: scale(.3) rotate(-45deg); }
html[data-theme-mode="auto"] .theme-toggle .half { opacity: 1; }
/* hover previews the next state */
html[data-theme-mode="light"] .theme-toggle:hover .rays { opacity: 0; transform: scale(.3) rotate(-45deg); }
html[data-theme-mode="dark"] .theme-toggle:hover .half { opacity: 1; }
html[data-theme-mode="auto"] .theme-toggle:hover .rays { opacity: 1; transform: none; }
html[data-theme-mode="auto"] .theme-toggle:hover .half { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle .rays { transition: opacity 280ms ease; transform: none !important; }
}

/* language switcher (dropdown) — on the steel nav */
.lang-switch { position: relative; }
.lang-switch summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; color: var(--paper); border: 0; opacity: 0.85; transition: opacity 120ms ease; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { opacity: 1; }
.lang-switch summary:hover .cur-code, .lang-switch[open] summary .cur-code { text-decoration: underline; text-underline-offset: 3px; }
.lang-switch .caret { font-size: 9px; display: inline-block; transition: transform 160ms ease; }
.lang-switch[open] .caret { transform: rotate(180deg); }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); width: max-content; min-width: 112px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 6px; z-index: 120; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 2px 6px -2px rgba(15,23,42,0.12), 0 18px 40px -16px rgba(15,23,42,0.30); }
/* invisible bridge across the gap so moving from the trigger onto the menu keeps hover */
.lang-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 8px; font: 500 13px/1 var(--sans); color: var(--graphite); transition: background-color 120ms ease; }
.lang-menu a:hover { background: var(--paper-2); text-decoration: none; }
.lang-menu a.cur { font-weight: 600; background: var(--paper-2); }
.lang-menu a.cur::after { content: '✓'; font-size: 11px; line-height: 1; color: currentColor; opacity: 0.5; }

/* inline language list (mobile menu + footer) — on dark steel */
.m-langs { display: flex; align-items: center; gap: 2px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; }
.m-langs a { color: var(--on-steel); padding: 6px 4px; }
.m-langs a.cur { color: var(--paper); }
.foot-bottom .m-langs { justify-content: flex-end; }

/* legal "German is binding" notice banner (non-de legal pages) */
.legal-notice { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.legal-notice-inner { max-width: 1240px; margin: 0 auto; padding: 12px 32px; font: 500 12.5px/1.55 var(--sans); color: var(--warn); }

/* ─── Vorschau-Modus (preview build) ───────────────────────────
   Warm neutral (--notice-*), in the house grid. The top band sticks to the viewport
   and has no dismiss control on purpose — the reservation has to stay visible on
   every page. --preview-h is measured by site.js so other sticky bars offset below it. */
.preview-banner {
  position: sticky; top: 0; z-index: 200;
  /* The band reads through the hard edge against the dark steel nav plus the solid
     tag — not through a saturated fill (a bright band made the dark text harsh). */
  background: var(--notice-bg); border-bottom: 1px solid var(--notice-line);
}
.preview-banner-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 9px var(--gutter);
  display: flex; align-items: baseline; gap: 12px;
}
.preview-banner p { font: 400 12.5px/1.5 var(--sans); color: var(--notice-ink); margin: 0; text-wrap: pretty; } /* 11:1 */
.preview-tag {
  flex: 0 0 auto; font: 500 10.5px/1.5 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: #F7F7F5; background: #1F2933; padding: 2px 8px; /* fixed pair: 13:1 on both themes' bands */
}
/* the price-list / calculator switcher sticks below the band, not under it */
.has-preview .preise-switch { top: var(--preview-h, 0px); }

/* repeated reservation as its own box (above the price table, on the contact page) */
.preview-note-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.kontakt-main .preview-note-wrap { max-width: none; padding: 0; }
.preview-note {
  border: 1px solid var(--notice-line); border-left: 3px solid var(--notice-ink);
  background: var(--notice-bg); padding: 16px 20px; margin: 0 0 28px;
}
.preview-note-h {
  font: 500 10.5px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--notice-ink); margin: 0 0 8px;
}
.preview-note p { font: 400 13.5px/1.6 var(--sans); color: var(--notice-soft); }

/* "Entwurf – gültig ab Eröffnung" under the H1 of the price list and the AGB */
.draft-badge {
  display: inline-block; margin: 14px 0 0;
  font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--notice-ink); background: var(--notice-bg);
  border: 1px solid var(--notice-line); padding: 6px 10px;
}

/* burger toggle — hidden on desktop */
.nav-burger {
  display: none; width: 44px; height: 44px; padding: 10px; background: transparent;
  border: 0; cursor: pointer; color: var(--paper);
}
.nav-burger span { display: block; height: 1.5px; background: var(--paper); margin: 5px 0; transition: transform 160ms ease, opacity 160ms ease; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ───── PAGE HEADER (sub-pages) ───── */
.page-head { padding: 64px 0 56px; }
.page-head-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.crumbs { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #6A6F77; margin-bottom: 32px; }
.crumbs a { color: #6A6F77; }
.crumbs a:hover { color: var(--graphite); }
.crumbs span.sep { margin: 0 10px; color: var(--rule-ink); }
.crumbs span.here { color: var(--graphite); }
.page-head-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: end; }
.page-head .num {
  font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--steel-deep); padding-top: 16px; border-top: 1px solid var(--steel-deep);
}
.page-head .num b { display: block; color: #6A6F77; font-weight: 400; margin-top: 8px; font-size: 11px; }
.page-head h1 {
  font-family: var(--brand); font-weight: 600;
  font-size: 72px; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--graphite); max-width: 18ch;
  padding-top: 16px; border-top: 1px solid var(--steel-deep);
}
.page-head h1 em { font-style: italic; font-weight: 500; color: #545962; }
.page-head .lede { margin-top: 24px; max-width: 60ch; font-size: 17px; line-height: 1.55; color: #3a3f47; }

/* ───── SECTIONS ───── */
section.s { padding: 80px 0; border-bottom: 1px solid var(--rule); }
.s-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.s-head { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: baseline; margin-bottom: 48px; }
.s-head .num { font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.s-head .num b { display: block; color: #6A6F77; font-weight: 400; margin-top: 8px; font-size: 11px; }
.s-head h2 { font-family: var(--brand); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.035em; color: var(--graphite); max-width: 24ch; padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.s-body { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; }
.marg { font: 500 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #6A6F77; }
.marg b { display: block; color: var(--graphite); font-weight: 500; font-size: 12px; margin-bottom: 10px; letter-spacing: 0.08em; }
.marg p { font: 400 13px/1.6 var(--sans); color: #3a3f47; letter-spacing: 0; text-transform: none; margin-top: 8px; }
.marg .link { display: inline-block; margin-top: 16px; color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; font: 500 12px/1 var(--mono); letter-spacing: 0.08em; }

section.s.steel { background: var(--steel-deep); color: var(--paper); border-bottom: none; }
section.s.steel .s-head .num { color: var(--on-steel); border-top-color: rgba(255,255,255,0.3); }
section.s.steel .s-head .num b { color: var(--steel-tint); }
section.s.steel .s-head h2 { color: var(--paper); border-top-color: rgba(255,255,255,0.3); }

/* numbered eyebrow labels removed site-wide (the grey "§ NN ·" / "NN.NN ·" tags).
   Scoped to header containers so legal-clause numbers (.clause .head .num),
   FAQ question numbers (.faq-head .n), process steps and the doc TOC stay. */
.hero-eyebrow,
.s-head .num,
.page-head-grid .num,
.cta-strip-inner .num,
.cta-inner .num,
.pillar .h .n { display: none !important; } /* !important: this is a deliberate kill-switch — without it .hero-eyebrow (l.210) and .cta .num (l.301) win the source-order tie and the labels stay visible */
/* keep the title/intro in the content column (aligned with the section body),
   now that the eyebrow that filled the left column is gone */
.s-head h2,
.page-head-grid > :last-child { grid-column: 2; }
.pillar .h { justify-content: flex-end; }
section.s.steel .marg { color: var(--on-steel); }
section.s.steel .marg b { color: var(--paper); }
section.s.steel .marg p { color: var(--steel-tint); }
section.s.tint { background: var(--paper-2); }

/* buttons on dark steel */
section.s.steel .btn-primary, nav.main .btn, .hero-steel .btn-primary { background: var(--paper); color: var(--steel-deep); }
section.s.steel .btn-ghost, .hero-steel .btn-ghost { color: var(--paper); border-color: var(--paper); }
section.s.steel .btn-ghost:hover, .hero-steel .btn-ghost:hover { background: var(--paper); color: var(--steel-deep); }
.btn-steel { background: var(--steel-deep); color: var(--paper); border: 1px solid var(--steel-deep); }
.btn-steel:hover { background: var(--steel-mid); border-color: var(--steel-mid); text-decoration: none; }

/* ───── CTA strip (reusable) ───── */
.cta-strip { background: var(--paper-2); padding: 80px 0; border-bottom: 1px solid var(--rule); }
.cta-strip-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: center; }
.cta-strip .num { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.cta-strip h2 { font-family: var(--brand); font-weight: 600; font-size: 48px; line-height: 1; letter-spacing: -0.035em; color: var(--graphite); margin-top: 24px; max-width: 18ch; }
.cta-strip p { color: #3a3f47; font-size: 16px; max-width: 50ch; margin: 20px 0; }
.cta-strip .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-strip .ctas .btn-primary { background: var(--steel-deep); color: var(--paper); }
.cta-strip .ctas .btn-ghost { color: var(--steel-deep); border-color: var(--steel-deep); }
.cta-strip .ctas .btn-ghost:hover { background: var(--steel-deep); color: var(--paper); }

/* ───── FOOTER ───── */
footer.site { background: var(--util-bg); color: var(--paper); padding: 64px 0 32px; }
.foot-grid { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 56px; }
.foot-grid h3 { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--on-steel); text-transform: uppercase; margin: 0 0 18px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { font: 400 14px/1.4 var(--sans); color: var(--paper); }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-grid li { font: 400 14px/1.4 var(--sans); color: var(--steel-tint); }
.foot-grid .addr { font: 400 13px/1.7 var(--sans); color: var(--steel-tint); }
.foot-grid .gb-logo { color: var(--paper); margin-bottom: 18px; }
.foot-grid .gb-logo:hover { text-decoration: none; }
.foot-grid .gb-logo .gb-word { font-size: 22px; }
.foot-bottom {
  max-width: 1240px; margin: 0 auto; padding: 24px 32px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 32px; align-items: baseline;
  font: 400 12px/1.5 var(--mono); color: var(--on-steel);
}
.foot-bottom > div:last-child { text-align: right; }
.foot-bottom .cookie-line { text-align: center; }
.foot-bottom .cookie-line a { color: var(--steel-tint); border-bottom: 1px solid var(--steel-soft); padding-bottom: 1px; }
.foot-bottom .cookie-line a:hover { color: var(--paper); text-decoration: none; border-color: var(--paper); }

.divider-text { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #6A6F77; }
.brand-h { font-family: var(--brand); font-weight: 600; letter-spacing: -0.025em; color: var(--graphite); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--rule); font: 500 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.tag.steel { background: var(--steel-deep); color: var(--paper); border-color: var(--steel-deep); }
.tag.amber { color: var(--warn); border-color: var(--warn); }

/* ═════════ HOMEPAGE — HERO ═════════ */
.hero { background: var(--steel-deep); color: var(--paper); border-bottom: 1px solid var(--steel-mid); }
.hero-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr; align-items: stretch; }
.hero-left { padding: 96px 0; }
.hero-eyebrow { font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: #B7C2D1; margin-bottom: 40px; display: flex; gap: 16px; align-items: center; }
.hero-eyebrow .line { width: 32px; height: 1px; background: #B7C2D1; }
.hero h1 { font-family: var(--brand); font-weight: 500; font-size: 76px; line-height: 1.06; letter-spacing: -0.04em; color: var(--paper); max-width: none; text-wrap: pretty; margin: 0; }
.hero h1 em { font-style: italic; font-weight: 400; color: #B7C2D1; }
.hero h1 .accent { color: #8FA0B5; font-style: normal; font-weight: 500; } /* ≥3:1 on steel-deep for large text */
.hero-lede { margin-top: 32px; font-size: 17px; line-height: 1.55; color: #D6DCE3; max-width: 980px; }
.hero-ctas { margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-ctas .btn-primary { background: var(--paper); color: var(--steel-deep); }
.hero-ctas .btn-ghost { color: var(--paper); border-color: var(--paper); }
.hero-ctas .btn-ghost:hover { background: var(--paper); color: var(--steel-deep); }
.hero-right { background: #1F3850; padding: 64px 56px; border-left: 1px solid var(--steel-mid); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.hero-right h2 { font-family: var(--brand); font-weight: 700; font-size: 16px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-steel); margin: 0; }
.hero-right .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; }
.hero-right .grid > div { padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.18); }
.hero-right .k { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-steel); margin-bottom: 8px; }
.hero-right .v { font: 500 16px/1.3 var(--sans); color: var(--paper); }
.hero-right .v small { display: block; font: 400 11px/1.4 var(--mono); color: #B7C2D1; margin-top: 4px; letter-spacing: 0.04em; }
.hero-right .footnote { font: 400 11px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-steel); padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.18); }

/* ═════════ PILLARS ═════════ */
/* subgrid: the three cards share one set of rows (icon · heading · body · ref),
   so the ref row — and its top rule — starts at the same Y in every card,
   no matter how the body copy or the ↳ label wraps. */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 1px; row-gap: 0; background: var(--rule); border: 1px solid var(--rule); }
.pillar { background: var(--paper); padding: 36px; display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 20px; min-height: 320px; }
.pillar .h { display: flex; justify-content: space-between; align-items: center; }
.pillar .h .n { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--steel-deep); }
.pillar .ic { width: 36px; height: 36px; color: var(--steel-mid); }
.pillar h3 { font-family: var(--brand); font-weight: 700; font-size: 26px; letter-spacing: -0.02em; color: var(--graphite); margin: 0; }
.pillar p { color: #3a3f47; font-size: 15px; margin: 0; }
.pillar .ref { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; color: #6A6F77; text-transform: uppercase; padding-top: 16px; border-top: 1px solid var(--rule); align-self: start; }

/* ═════════ SERVICES ═════════ */
.svc-list { border-top: 1px solid var(--graphite); }
.svc-row { display: grid; grid-template-columns: 80px 60px 1fr 1.2fr 180px; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--rule); align-items: start; transition: background 120ms ease; }
.svc-list .svc-row:last-child { border-bottom: 1px solid var(--graphite); }
.svc-row .num { font: 500 12px/1 var(--mono); color: var(--graphite); padding-top: 6px; }
.svc-row .tag-cell { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-deep); padding-top: 6px; }
.svc-row h3 { font-family: var(--brand); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--graphite); margin: 0; }
.svc-row p { color: #3a3f47; font-size: 14px; max-width: 48ch; margin: 8px 0 0; }
.svc-row .meta { font: 400 13px/1.5 var(--sans); color: #6A6F77; padding-top: 4px; }
.svc-row .price { text-align: right; font: 500 16px/1.3 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; padding-top: 4px; }
.svc-row .price small { display: block; font: 400 11px/1.4 var(--mono); color: #6A6F77; margin-top: 6px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ═════════ PULL QUOTE ═════════ */
.pull { background: linear-gradient(135deg, var(--steel-deep) 0%, var(--steel-mid) 100%); color: var(--paper); padding: 96px 0; border-bottom: 1px solid var(--steel-mid); position: relative; overflow: hidden; }
.pull::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 119px, rgba(255,255,255,0.04) 119px 120px), repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,0.04) 119px 120px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%); pointer-events: none; }
.pull-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.pull .quote-mark { font-family: var(--brand); font-weight: 500; font-size: 200px; line-height: 0.7; color: var(--steel-soft); display: block; margin-bottom: 12px; }
.pull blockquote { margin: 0; font-family: var(--brand); font-weight: 500; font-size: 64px; line-height: 1.06; letter-spacing: -0.03em; color: var(--paper); max-width: 22ch; text-wrap: balance; }
.pull blockquote em { font-style: italic; font-weight: 400; color: var(--steel-tint); }
.pull .source { margin-top: 40px; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-tint); padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.pull .source .right { display: flex; gap: 24px; flex-wrap: wrap; }

/* ═════════ LAW MATRIX ═════════ */
.law-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.law-items.two { grid-template-columns: repeat(2, 1fr); }
.law-item { background: var(--paper); padding: 28px; }
/* overview grid has an odd card count → paint the trailing cell so the rule-grid closes cleanly (hidden at 1-col, where there is no orphan) */
.spec .law-items::after { content: ""; background: var(--paper); }
.law-item .k { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-deep); margin-bottom: 14px; }
.law-item .v { font-family: var(--brand); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--graphite); margin-bottom: 8px; }
.law-item .sub { font: 400 14px/1.5 var(--sans); color: #545962; }
.spec-foot { margin-top: 18px; font: 400 13px/1.5 var(--sans); color: #545962; }

/* ═════════ AMMUNITION / NON-SHOP CALLOUT (graphite warning band) ═════════ */
.callout { background: var(--graphite); color: var(--paper); }
.callout-inner { max-width: 1240px; margin: 0 auto; padding: 48px 32px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: center; }
.callout .k { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); margin-bottom: 14px; }
.callout h3 { font-family: var(--brand); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; color: var(--paper); margin: 0; }
.callout p { color: var(--steel-tint); font-size: 15px; margin: 12px 0 0; max-width: 56ch; }
.callout .neg-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.callout .neg { padding: 12px 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); display: flex; gap: 10px; align-items: center; font: 500 13.5px/1.3 var(--sans); color: var(--paper); }
.callout .neg::before { content: "✕"; color: var(--warn); font-weight: 500; font-family: var(--mono); }

/* ═════════ FAQ (accessible accordion) ═════════ */
.faq-list { border-top: 1px solid var(--graphite); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-head {
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  padding: 24px 0; display: grid; grid-template-columns: 60px 1fr 24px; gap: 24px; align-items: baseline;
  font-family: inherit;
}
.faq-head .n { font: 500 12px/1 var(--mono); color: var(--steel-deep); }
.faq-head .q { font-family: var(--brand); font-weight: 500; font-size: 19px; line-height: 1.4; letter-spacing: -0.015em; color: var(--graphite); }
.faq-head .plus { font: 400 22px/0.6 var(--sans); color: var(--graphite); text-align: right; transition: transform 160ms ease; }
.faq-head[aria-expanded="true"] .plus { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 24px; }
.faq-a-inner { display: grid; grid-template-columns: 60px 1fr 24px; gap: 24px; }
.faq-a-inner .body { grid-column: 2 / 3; color: #3a3f47; max-width: 62ch; font-size: 14.5px; line-height: 1.6; }
.faq-item.open .faq-a { display: block; }
.faq-ref { margin-top: 12px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel-deep); }

/* ═════════ HOMEPAGE CTA (light card on steel) ═════════ */
.cta { background: var(--paper-2); }
.cta-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: center; }
.cta .num { font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); border-top: 1px solid var(--steel-deep); padding-top: 16px; margin-bottom: 24px; display: inline-block; }
.cta h2 { font-family: var(--brand); font-weight: 600; font-size: 60px; line-height: 0.96; letter-spacing: -0.035em; color: var(--graphite); margin: 0 0 24px; }
.cta p { color: #3a3f47; font-size: 16px; max-width: 38ch; margin: 0 0 28px; }
.cta .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .ctas .btn-primary { background: var(--steel-deep); color: var(--paper); }
.cta .ctas .btn-ghost { color: var(--steel-deep); border-color: var(--steel-deep); }
.cta .ctas .btn-ghost:hover { background: var(--steel-deep); color: var(--paper); }
.cta-card { background: var(--steel-deep); color: var(--paper); padding: 40px; }
.cta-card h3 { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-steel); margin: 0 0 28px; }
.cta-card .row { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); align-items: baseline; }
.cta-card .row:last-of-type { border-bottom: none; }
.cta-card .row .k { font: 500 13px/1.3 var(--mono); color: var(--steel-tint); }
.cta-card .row .v { font: 500 14px/1.3 var(--sans); color: var(--paper); }
.cta-card .note { margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); font: 400 12px/1.5 var(--mono); color: var(--on-steel); letter-spacing: 0.04em; }

/* ═════════ PRICE TABLE (preise) ═════════ */
.ptable { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
/* two-column layout mirroring .topic on Angebot: group title left, rows right */
.ptable-group { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 56px; align-items: start; margin-bottom: 56px; }
.ptable-group .gh { padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.ptable-group .gh h2 { font-family: var(--brand); font-weight: 600; font-size: 34px; line-height: 1.06; letter-spacing: -0.03em; color: var(--graphite); margin: 0; max-width: 18ch; }
.ptable-group .gh .qual { display: block; font: 400 12px/1.4 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: #6A6F77; margin-top: 10px; }
.ptable-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.ptable-row .pos { font: 400 15px/1.4 var(--sans); color: var(--graphite); }
.ptable-row .pos small { display: block; font: 400 12px/1.4 var(--mono); color: #6A6F77; margin-top: 4px; letter-spacing: 0.02em; }
.ptable-row .price { text-align: right; font: 500 16px/1.3 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; }
.ptable-note { font: 400 13px/1.6 var(--sans); color: #545962; margin-top: 12px; max-width: 72ch; }

/* Rental prices listed per billing period (yearly / quarterly / monthly), stacked */
.ptable-row .price.price-stack { display: grid; grid-template-columns: auto auto; column-gap: 18px; row-gap: 5px; justify-content: end; align-items: baseline; text-align: left; }
.price-stack .ppl { font: 400 12px/1.3 var(--mono); color: #6A6F77; letter-spacing: 0.02em; white-space: nowrap; }
.price-stack .ppv { text-align: right; font: 500 15px/1.3 var(--sans); color: var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable-note + .ptable-note { margin-top: 8px; }

/* ═════════ DOC LAYOUT (legal / impressum) ═════════ */
.doc { padding: 56px 0; }
.doc-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: start; }
.doc-toc { position: sticky; top: 24px; }
.doc-toc h2 { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--graphite); }
.doc-toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.doc-toc ol li { border-bottom: 1px dashed var(--rule); }
.doc-toc ol li a { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 10px 0; font: 500 13px/1.4 var(--sans); color: var(--graphite); text-decoration: none; }
.doc-toc ol li a:hover { color: var(--steel-deep); }
.doc-toc ol li a .n { font-family: var(--mono); font-size: 11px; color: #8A8E94; letter-spacing: 0.04em; }
.doc-toc .meta { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); font: 400 11px/1.5 var(--mono); color: #6A6F77; }

.clause { padding: 32px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: 24px; }
.clause:first-of-type { padding-top: 0; }
.clause .head { display: flex; gap: 16px; align-items: baseline; margin-bottom: 16px; }
.clause .num { font: 500 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-deep); flex: 0 0 80px; padding-top: 4px; }
.clause h2 { font-family: var(--brand); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; color: var(--graphite); margin: 0; }
.clause .body { padding-left: 96px; }
.clause .body p { font-size: 15px; line-height: 1.65; color: #2C3138; margin: 0 0 12px; max-width: 74ch; }
.clause .body p:last-child { margin-bottom: 0; }
.clause .body p.sub { padding-left: 18px; color: #3a3f47; }
.clause .body p.lead { font-size: 16px; color: var(--graphite); }
.clause .body b { font-weight: 600; color: var(--graphite); }
.clause .body a { color: var(--steel-deep); text-decoration: underline; text-underline-offset: 3px; }
.clause .body ul { margin: 0 0 12px; padding: 0; list-style: none; max-width: 74ch; }
.clause .body ul li { padding: 8px 0 8px 22px; position: relative; font: 400 14.5px/1.6 var(--sans); color: #2C3138; }
.clause .body ul li::before { content: "·"; position: absolute; left: 6px; color: var(--steel-deep); font-weight: 700; }
.clause .body .note { font: 500 11px/1.4 var(--mono); color: #6A6F77; letter-spacing: 0.04em; }

/* ═════════ TOPIC (long-form detail blocks — Angebot) ═════════ */
.topic { padding: 64px 0; }
.topic-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.topic h2 { font-family: var(--brand); font-weight: 600; font-size: 36px; line-height: 1.05; letter-spacing: -0.03em; color: var(--graphite); margin: 0 0 16px; max-width: 18ch; padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.topic .id { font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--steel-deep); display: block; }
.topic .meta-price { font: 500 14px/1.3 var(--sans); color: var(--graphite); margin-top: 8px; }
.topic .body p { font-size: 16px; line-height: 1.6; color: #2C3138; margin: 0 0 16px; max-width: 64ch; }
.topic .body p:first-child { margin-top: 0; }
.topic .body p b { font-weight: 600; color: var(--graphite); }
.topic .body em { font-style: italic; color: #545962; }
.topic .body a { color: var(--steel-deep); text-decoration: underline; text-underline-offset: 3px; }
.topic ul { margin: 0 0 16px; padding: 0; list-style: none; max-width: 64ch; }
.topic ul li { padding: 12px 0 12px 32px; border-top: 1px solid var(--rule); position: relative; font: 400 15px/1.5 var(--sans); color: #2C3138; }
.topic ul li::before { content: "+"; position: absolute; left: 0; color: var(--steel-deep); font-weight: 500; font-family: var(--mono); font-size: 14px; top: 13px; }
.topic ul li b { display: block; font: 500 14px/1.3 var(--sans); color: var(--graphite); margin-bottom: 4px; }
.topic .ref-box { margin-top: 24px; padding: 20px; background: var(--paper-2); border-left: 3px solid var(--steel-deep); font: 400 14px/1.55 var(--sans); color: #3a3f47; }
.topic .ref-box b { font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-deep); display: block; margin-bottom: 8px; }

/* compact "Angebot in Kürze" teaser on Home */
.svc-teaser { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.svc-teaser .it { background: var(--paper); padding: 24px; }
.svc-teaser .it h3 { font-family: var(--brand); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--graphite); margin: 0 0 6px; }
.svc-teaser .it p { font: 400 14px/1.5 var(--sans); color: #3a3f47; margin: 0; }
.svc-teaser .it .pr { font: 500 12px/1 var(--mono); color: var(--steel-deep); margin-top: 10px; display: block; }

/* ═════════ KONTAKT ═════════ */
.kontakt-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border-bottom: 1px solid var(--rule); }
.kontakt-main { padding: 64px 56px 64px 32px; }
.kontakt-main .lead { font-size: 17px; line-height: 1.6; color: #2C3138; max-width: 58ch; margin: 0 0 36px; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.contact-card { background: var(--paper); padding: 28px; display: flex; flex-direction: column; }
.contact-card h3 { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-deep); margin: 0 0 14px; }
.contact-card .v { font-family: var(--brand); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--graphite); margin-bottom: 6px; }
.contact-card .v a { text-decoration: none; }
.contact-card .v a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-card p { font: 400 14px/1.55 var(--sans); color: #3a3f47; margin: 0; }
.contact-card p + p { margin-top: 8px; }
.contact-card .ctas { margin-top: auto; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.kontakt-info { background: var(--paper-2); padding: 64px 32px 64px 56px; border-left: 1px solid var(--rule); }
.info-block { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.info-block:first-child { padding-top: 0; }
.info-block h3 { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-deep); margin: 0 0 14px; }
.info-block .v { font-family: var(--brand); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--graphite); margin-bottom: 6px; }
.info-block .v a { text-decoration: none; }
.info-block p { font: 400 14px/1.55 var(--sans); color: #3a3f47; margin: 0; }
.info-block p + p { margin-top: 8px; }
.info-warn { background: var(--graphite); color: var(--paper); padding: 24px; margin: 24px 0; }
.info-warn h3 { font: 500 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); margin: 0 0 14px; }
.info-warn p { font: 400 14px/1.55 var(--sans); color: var(--steel-tint); }
.info-warn b { color: var(--paper); }

/* ─── Preise price calculator ─────────────────────────────── */
.price-calc { border-bottom: 1px solid var(--rule); }
.price-calc[hidden] { display: none; }
.price-calc-inner { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--gutter); }
.calc-head { max-width: 60ch; margin-bottom: 40px; }
.calc-eyebrow { display: inline-block; font: 500 11px/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-deep); padding-top: 16px; border-top: 1px solid var(--steel-deep); }
.calc-head h2 { font-family: var(--brand); font-size: var(--fs-3xl); color: var(--graphite); margin: 16px 0 12px; }
.calc-lede { color: var(--muted); max-width: 56ch; }

.calc-controls { display: flex; flex-direction: column; gap: 16px; align-items: start; margin-bottom: 40px; }

/* One row per weapon: [Waffe N] [Typ ▾] [Grösse ▾] [☐ Box] (☐ Verschluss) [×].
   Flex-wrap keeps the optional breech control from leaving an empty grid track. */
.calc-weapons { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.calc-weapon { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; border: 1px solid var(--rule); padding: 14px 16px; }
.calc-w-n { flex: 0 0 auto; min-width: 64px; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.calc-w-typesel, .calc-w-sizesel { flex: 0 1 auto; min-width: 0; max-width: 100%; font: 400 15px/1.4 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule); border-radius: 0; padding: 10px 12px; outline: none; cursor: pointer; }
.calc-w-typesel:focus, .calc-w-sizesel:focus { border-color: var(--graphite); }
.calc-w-box, .calc-w-verschluss { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; font: 400 15px/1.4 var(--sans); cursor: pointer; }
.calc-w-box small, .calc-w-verschluss small { color: var(--muted); font-size: 12px; }
.calc-w-box input, .calc-w-verschluss input { accent-color: var(--steel-deep); }
.calc-w-verschluss[hidden] { display: none; }
.calc-w-remove { flex: 0 0 auto; margin-left: auto; appearance: none; width: 30px; height: 30px; line-height: 1; background: var(--white); border: 1px solid var(--rule); color: var(--muted); font-size: 18px; cursor: pointer; transition: border-color 120ms ease, color 120ms ease; }
.calc-w-remove:hover { border-color: var(--graphite); color: var(--graphite); }
.calc-w-remove[hidden] { display: none; }
.calc-add { align-self: start; appearance: none; background: transparent; border: 1px dashed var(--rule-ink); padding: 11px 18px; font: 500 13px/1 var(--brand); color: var(--graphite); cursor: pointer; transition: border-color 120ms ease, background 120ms ease; }
.calc-add:hover { border-color: var(--graphite); background: var(--paper-2); }
.calc-add[disabled] { opacity: 0.45; cursor: not-allowed; }

.calc-period-field, .calc-weapons-field { display: flex; flex-direction: column; gap: 6px; }
.calc-weapons-field { width: 100%; }
.calc-period-label, .calc-weapons-label { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.calc-period { display: inline-flex; flex-wrap: wrap; width: fit-content; max-width: 100%; border: 1px solid var(--rule); }
.calc-period button { appearance: none; background: var(--white); border: 0; border-right: 1px solid var(--rule); padding: 12px 18px; font: 500 13px/1 var(--brand); color: var(--graphite); cursor: pointer; transition: background 120ms ease, color 120ms ease; }
.calc-period button:last-child { border-right: 0; }
.calc-period button .off { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.calc-period button[aria-pressed="true"] { background: var(--steel-deep); color: var(--paper); }
.calc-period button[aria-pressed="true"] .off { color: var(--steel-tint); }

.calc-result { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; padding-top: 24px; }
.calc-result .ptable-group { margin: 0; }
.calc-result .calc-sum .pos, .calc-result .calc-sum .price { font-weight: 600; }
/* One fixed 170px price column so every "CHF" shares the same left x, with the number
   right-aligned to the column edge (accounting layout). 170px fits the widest realistic
   total (CHF 9'999.00) even in the large Total font. */
.calc-result .ptable-row { grid-template-columns: 1fr 170px; }
.calc-result .ptable-row .price { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* `.ptable-row` is display:grid (author rule), which beats the UA [hidden] rule,
   so toggling this row needs an explicit hidden override or it never hides. */
.calc-verschluss-row[hidden], .calc-box-row[hidden], .calc-processing-row[hidden] { display: none; }
/* Total renders like its own section (mirrors "Einmalig"/"Laufend"): "Total" is a heading in
   the left column with the same steel rule above it; the amount sits in the right column's
   170px price box, with a rule above spanning the full right column (like the section rows)
   and the double "grand total" rule below it (CHF → amount). Grid columns and the 36px gap
   match .ptable-group, so everything lines up with the sections above. */
.calc-totals { grid-column: 1 / -1; }
.calc-first { position: relative; display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 56px; align-items: start; }
.calc-first .pos { grid-column: 1; padding-top: 16px; border-top: 1px solid var(--steel-deep); font-size: 17.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--graphite); }
.calc-first .price { grid-column: 2; justify-self: end; width: 170px; padding-top: 16px; padding-bottom: 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; font-weight: 600; color: var(--graphite); border-bottom: 3px double var(--rule); }
.calc-first::before { content: ""; position: absolute; top: 0; left: calc((100% - 56px) / 2.6 + 56px); right: 0; border-top: 1px solid var(--rule); }
.calc-annual { font-size: var(--fs-sm); }
.calc-result .ptable-note { grid-column: 1 / -1; margin-top: 8px; }
.calc-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ─── Preise view switch (sticky Rechner · Preisliste) ──────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#price-calc, #preisliste { scroll-margin-top: 60px; }
.preise-switch { position: sticky; top: 0; z-index: 50; background: var(--paper); }
#preisliste { border-bottom: none; }
.preise-switch[hidden] { display: none; }
.preise-switch-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px var(--gutter); display: flex; gap: 0; }
.preise-switch-inner a {
  font: 500 13px/1 var(--brand); letter-spacing: -0.01em;
  padding: 11px 18px; color: var(--graphite);
  border: 1px solid var(--rule); background: var(--white);
  transition: background 120ms ease, color 120ms ease;
}
.preise-switch-inner a + a { border-left: 0; }
.preise-switch-inner a:hover { text-decoration: none; background: var(--paper-2); }
.preise-switch-inner a.cur, .preise-switch-inner a.cur:hover { background: var(--steel-deep); color: var(--paper); border-color: var(--steel-deep); }

/* ─── Onepager (the public pre-launch page at /<lang>/) ───────
   The first screen (header + hero) is the steel band of the launch home page:
   same background, same 84px brand headline, same lede colour. The band has to
   run edge to edge like nav.main does, so .op-page is a plain column and every
   direct child centres its own content with the shared gutter formula below. */
.op-page { width: 100%; max-width: 1440px; margin: 0 auto; }
.op-head, .op-hero, .op-signup, .op-mail-main {
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.op-head { background: var(--steel-deep); color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.op-head .gb-logo, .op-head .lang-switch summary, .op-head .theme-toggle { color: var(--paper); }
.op-head .gb-logo .gb-mark { width: 30px; height: 30px; }
.op-head .gb-logo .gb-word { font-size: 24px; }
.op-actions { display: flex; align-items: center; gap: 18px; }
.op-hero { background: var(--steel-deep); color: var(--paper); border-bottom: 1px solid var(--steel-mid); padding-block: 96px 56px; }
/* the headline carries its own break (two lines); it must not be re-wrapped by a
   17ch cap or by balancing, so the size is the thing that keeps it inside 1176px */
.op-hero h1 { font-family: var(--brand); font-weight: 500; font-size: 76px; line-height: 1.06; letter-spacing: -0.04em; color: var(--paper); max-width: none; text-wrap: pretty; margin: 0; }
.op-hero h1 .accent { color: #8FA0B5; font-style: normal; font-weight: 500; } /* ≥3:1 on steel-deep for large text */
.op-hero h1 em { font-style: italic; font-weight: 400; color: #B7C2D1; }
/* French is the longest of the four headlines — it needs a smaller size to keep
   the same two lines inside the 1176px band */
html[lang^="fr"] .hero h1, html[lang^="fr"] .op-hero h1 { font-size: 68px; }
/* the lede runs the width of the steel band, not a 44ch column: each sentence pair
   stays on one line wherever the viewport allows it */
.op-lede { margin: 32px 0 0; max-width: 980px; font-size: 17px; line-height: 1.55; color: #D6DCE3; }
.op-lede + .op-lede { margin-top: 14px; }
/* the reservation box sits on steel here — it keeps the warm notice surface so the
   Vorbehalt reads as a distinct notice against the steel field, not as a dimmed
   part of it (same palette as the notices on the other pages) */
.op-hero .preview-note { margin: 36px 0 0; max-width: 980px; }
.op-signup { padding-block: 56px 72px; }
.op-signup h2 { font-family: var(--brand); font-size: var(--fs-3xl); letter-spacing: -0.02em; }
.op-signup-lede { margin: 14px 0 28px; max-width: 60ch; color: var(--muted); }
/* steel footer, launch-style, but three columns (no Navigation) and with the
   handover note under the contact list */
.op-site-foot .foot-grid { grid-template-columns: 2fr 1fr 1fr; }
.op-site-foot .foot-note { font: 400 13px/1.6 var(--sans); color: var(--steel-tint); max-width: 34ch; margin-top: 8px; }

/* ─── Mail pages (confirm / unsubscribe, rendered by /api/lib/page.php) ─────────
   One sentence and, if a step is left, one button — nothing above them but the
   header. The message is set at heading size because it IS the page's heading;
   .signup-status keeps the class so the shared colour rules (.is-error) apply. */
/* The page is short by design, so body has to be stretched to the viewport: dark
   mode paints its background on body, and a body that ends with the content leaves
   the rest of the window showing html's light paper underneath. */
body.op-mail { min-height: 100vh; display: flex; flex-direction: column; }
body.op-mail .op-page { flex: 1 0 auto; display: flex; flex-direction: column; }
.op-mail-main { padding-block: 88px 40px; flex: 1 0 auto; }
.op-mail-main .signup-status.is-standalone {
  margin: 0; max-width: 30ch; font-family: var(--brand); font-weight: 500;
  font-size: var(--fs-3xl); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink);
}
.op-mail-main .signup-status.is-error { color: var(--warn); }
/* Der zweite Satz der Antwort in Akzentfarbe — Stahl auf Papier, im Dunkelmodus die
   hellere Stahlstufe, weil das dunkle Stahl auf der Navy-Fläche zu wenig Kontrast
   hätte (6.5:1 hell, 4.9:1 dunkel). */
.op-mail-main .signup-status .accent { color: var(--steel); }
html[data-theme="dark"] .op-mail-main .signup-status .accent { color: var(--steel-soft); }
.op-mail-main .signup-status.is-error .accent { color: inherit; }
/* Die betroffene Adresse unter der Antwort (api/lib/page.php): klein, in der
   Monospace, damit sie als Datum und nicht als Fliesstext gelesen wird. */
.op-mail-main .signup-address { margin: 14px 0 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); word-break: break-all; }
/* Die Beschriftung davor bleibt Fliesstext — nur die Adresse selbst ist Monospace. */
.op-mail-main .signup-address .lbl { font-family: var(--sans); }
.op-mail-main form { margin-top: 32px; }

/* signup form */
.signup-form { max-width: 560px; }
.signup-row { display: flex; gap: 12px; align-items: stretch; position: relative; }
.signup-row input { flex: 1 1 auto; font: 400 16px/1.4 var(--sans); color: var(--ink); background: var(--white); border: 1px solid var(--rule-ink); border-radius: 0; padding: 0 14px; height: 44px; outline: none; min-width: 0; }
.signup-row input:focus { border-color: var(--graphite); }
.signup-row input:user-invalid { border-color: var(--warn); }
.signup-row .btn { flex: 0 0 auto; }
.signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup-consent { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.55; color: var(--muted); }
.signup-consent a { text-decoration: underline; text-underline-offset: 3px; }
.signup-mail { margin-top: 8px; font-size: var(--fs-sm); color: var(--muted); }
.signup-status { margin-top: 14px; font-size: var(--fs-sm); }
/* Same specificity as .is-error below (two classes each), so this must stay
   declared first: when the server renders both classes on a failed confirm,
   .is-error's later declaration is what makes its colour win. */
.signup-status.is-standalone { font-size: var(--fs-lg); color: var(--graphite); }
.signup-status.is-error { color: var(--warn); }
.signup-form.is-done :is(.signup-row, .signup-consent, .signup-mail, .signup-trap) { display: none; }
.signup-form.is-done .signup-status { font-size: var(--fs-lg); color: var(--graphite); }
/* Briefsymbol vor der Erfolgsmeldung (signup.js). Es skaliert mit der Schriftgrösse
   und sitzt leicht angehoben auf der Grundlinie, damit es zur Versalhöhe passt. */
/* display:inline-block schlägt die globale Regel `img, svg { display: block }` aus
   tokens.css — sonst steht das Symbol auf einer eigenen Zeile über dem Satz. */
.signup-status .icon-mail { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 0.45em; }

/* ── Zwischen Klick und Antwort ──────────────────────────────────────────────
   Der Weg zum Server dauert; ohne Zeichen dafür wirkt die Seite eingefroren und
   es wird ein zweites Mal geklickt. signup.js setzt darum .is-sending, bis die
   Antwort da ist, blendet mit .is-leaving Feld und Knopf aus und lässt die
   Meldung mit .is-done an deren Stelle hereinkommen. Alle drei Zustände sind
   rein visuell — die Meldung im Live-Bereich (data-sending) trägt denselben
   Stand für Screenreader. */
.signup-form.is-sending .signup-row input { color: var(--muted); }
.signup-form.is-sending .signup-row :is(input, .btn) { pointer-events: none; }
/* Laufender Balken unter der Eingabezeile: ein Verlaufsstück von 45 % Breite
   wandert über die volle Breite. Ein einzelnes Pseudoelement genügt dafür —
   ein zusätzliches Kind in .signup-row wäre ein Flex-Item und würde die Zeile
   umbauen. */
.signup-form.is-sending .signup-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--graphite), transparent);
  background-size: 45% 100%; background-repeat: no-repeat;
  animation: signup-scan 1000ms linear infinite;
}
@keyframes signup-scan { from { background-position: -50% 0; } to { background-position: 150% 0; } }
/* Der Pfeil im Knopf schiebt sich taktweise nach vorn — dieselbe Bewegung wie
   beim Hover (tokens.css), nur fortlaufend. */
.signup-form.is-sending .btn .arrow { animation: signup-nudge 900ms ease-in-out infinite; }
@keyframes signup-nudge { 0%, 100% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(5px); opacity: 0.3; } }
.signup-form.is-leaving :is(.signup-row, .signup-consent) { opacity: 0; transform: translateY(-4px); transition: opacity 240ms ease, transform 240ms ease; }
.signup-form.is-done .signup-status { animation: signup-rise 400ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes signup-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Bei reduzierter Bewegung setzt die globale Regel oben jede Dauer auf 0.01ms —
   der wandernde Balken bliebe dann ausserhalb des sichtbaren Bereichs stehen.
   Er wird hier zur ruhigen Linie, die den Wartezustand ebenso anzeigt. */
@media (prefers-reduced-motion: reduce) {
  .signup-form.is-sending .signup-row::after { background: var(--rule-ink); opacity: 0.6; }
}