/* Calio homepage — the premium layer: the foundation, the animations and the order of the page stay as they were;
   the layer gives the background depth and the page a finished look, in the Calio blue theme.

   Loaded ONLY by landing.html, after site.css, and every rule sits under body.home: the account pages, /kontakt,
   /hilfe and the legal pages share site.css and stay exactly as they were (tests/test_site_home_layer.py). Nothing
   here changes a text, a link, an anchor or a script hook; site.js, the hero sequence, the Feature-Tour and the
   reveal-on-scroll keep running on the same markup.

   What it adds:
     * a display face for headings (Plus Jakarta Sans 600-800, OFL, self-hosted Latin subset — the licence ships
       next to the file in dashboard/assets/fonts/), Inter stays the text face. Its ! , . : ; are left out of the
       unicode-range on purpose: Plus Jakarta's punctuation has wide side bearings that float off the word under the
       tight display tracking («hochladen .»), so those five marks come from Inter 800, the next font in the stack;
     * eyebrows with a short blue rule, a pill navigation, rounder buttons;
     * the engraved lake panorama under the hero (light and dark variants, picture element in landing.html);
     * pastel-blue stages with a fine guilloche (concentric hairlines, pure CSS) behind the product windows;
     * deep-blue plates with an engraved texture for «In drei Schritten» (an office) and the pricing header, and the blue-toned
       Alps behind the final call to action. Their images are requested only once the visitor scrolls towards them
       (the :has() triggers below), so the first view loads none of them.
   The images are under /assets/img/site/ (README there: source, AI-generated, no persons or brands). The review of
   11.10.2026 (art, motion, accessibility, languages, speed; every finding reproduced) is folded in. */

@font-face {
  font-family: "Calio Display";
  src: url("/assets/fonts/PlusJakartaSans-display-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  /* optional, not swap: the file is preloaded and arrives before first paint; if it ever misses the block window
     the headings stay in Inter for that one view instead of reflowing the hero (and use the face from the next) */
  font-display: optional;
  unicode-range: U+0020, U+0022-002B, U+002D, U+002F-0039, U+003C-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0178,
    U+02BC, U+02C6, U+02DA, U+02DC, U+2009-200A, U+2013-2014, U+2018-201E, U+2020-2022, U+2026, U+2030, U+2039-203A,
    U+2044, U+20AC, U+2122, U+2190-2193, U+2212;
}

body.home {
  --bg: #ffffff;
  --surface-2: #f2f5fa;
  --line: #e3e8f0;
  --ink: #0b1628;
  --tint: #f4f7fc;                       /* the quiet alternate section */
  --band: #0e2f63;                       /* deep Calio blue: the plates */
  --band-text: #ffffff;
  --band-muted: #dde7f6;                 /* at least 5:1 over the lightest engraving pixels */
  --band-accent: #8fbaf6;
  --band-line: rgba(255, 255, 255, .16);
  --band-card: rgba(255, 255, 255, .09);
  --stage-1: #e4eefc;
  --stage-2: #f3f7fe;
  --guilloche: rgba(27, 95, 184, .09);
  --r-xl: 28px;
  --r-card: 18px;
  --font-display: "Calio Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --fw-display: 800;
  --fs-h1: clamp(2.25rem, 1rem + 2.9vw, 3rem);       /* 36 -> 48: the hero leads */
  --fs-h2: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);   /* 28 -> 40: site.css's own section size */
  --shadow-lg: 0 30px 70px -24px rgba(14, 47, 99, .30), 0 0 0 1px rgba(14, 47, 99, .05);
  --pop-shadow: 0 18px 40px -16px rgba(14, 47, 99, .35), 0 0 0 1px rgba(14, 47, 99, .06);
  --tab-shadow: 0 10px 30px -14px rgba(14, 47, 99, .28), 0 0 0 1px rgba(14, 47, 99, .06);
  --btn-shadow: 0 1px 2px rgba(14, 47, 99, .28), 0 6px 14px -8px rgba(14, 47, 99, .35), inset 0 1px 0 rgba(255, 255, 255, .16);
  --hl-shadow: 0 0 0 2px var(--accent), 0 28px 56px -36px rgba(14, 47, 99, .38);
  background: var(--bg);
}

/* the decorative stages bleed past their columns; the page itself must never scroll sideways. clip, not hidden:
   no scroll container, overflow-y stays visible, the sticky nav and the footer live outside main */
.home #inhalt { overflow-x: clip; }
/* engines without overflow: clip (Safari/iPadOS < 16): the base .hero { overflow: hidden } fallback is overridden below,
   so main guards the sides itself; it has no sticky descendants, so hidden is safe there */
@supports not (overflow: clip) { .home #inhalt { overflow-x: hidden; } }

/* ---------------------------------------------------------------- type */
.home :is(.hero h1, .sec-head h2, .final h2) { color: var(--ink); word-spacing: .03em; }
.home .hero h1 { font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.home .hero h1 em { color: var(--accent); }
/* two lines in de/en/it in the two-column hero from 981 px: the cap follows the column, 48 px from about 1143 px */
@media (min-width: 981px) { .home .hero h1 { font-size: min(var(--fs-h1), 4.2vw); } }
/* the section titles one step below the hero, in 700, so the h1 is the only 800 line on the page */
.home .sec-head h2 { font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.home #funktionen .sec-head { max-width: 780px; }
.home :is(.step h3, .aud b, .checks b, .price-card h3, .tt b) { font-family: var(--font-display); font-weight: 700;
  letter-spacing: -.015em; word-spacing: .03em; }
.home .price-card .amount { font-weight: 800; letter-spacing: -.035em; }

/* eyebrow: a short blue rule and a spaced capital label (hero, every section head) */
.home :is(.hero .eyebrow, .sec-head .kicker) {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
  font-feature-settings: "case";
}
.home :is(.hero .eyebrow, .sec-head .kicker)::before {
  content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--accent); flex: none;
}
/* «SMEs» is a plural: in capitals it would read «SMES». The English hero eyebrow keeps its source case */
html:lang(en) .home .hero .eyebrow { text-transform: none; letter-spacing: .04em; }
@media (max-width: 360px) {
  .home :is(.hero .eyebrow, .sec-head .kicker) { font-size: .72rem; letter-spacing: .08em; gap: 8px; }
  .home :is(.hero .eyebrow, .sec-head .kicker)::before { width: 14px; }
}

/* ---------------------------------------------------------------- buttons */
.home .btn { border-radius: 12px; }
.home .btn.lg { min-height: 52px; padding: 13px 24px; font-size: 16px; }
.home .btn.primary { box-shadow: var(--btn-shadow); }
.home .btn.primary:active { transform: scale(.98); }

/* ---------------------------------------------------------------- navigation: the links in a pill */
.home .nav .links {
  gap: 2px; padding: 4px; margin: 0 auto; height: 44px; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
}
.home .nav .links a { padding: 6px 14px; border-radius: 999px; line-height: 24px; color: var(--text-2);
  transition: background-color .2s, color .2s, box-shadow .2s; }
.home .nav .links a::after { display: none; }
.home .nav .links a:hover { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.home .nav .actions { margin-left: 0; }
/* the pill sits midway between the logo and the flag: the flag's own auto margin must not take a third of the free
   space. Only where the links show — the same thresholds as site.css (.nav .links display, «max-width: 1079px» and
   its language exceptions); a change there must follow here */
@media (min-width: 981px) { html:lang(en) .home .nav .langsw { margin-left: 0; } }
@media (min-width: 1080px) { html:lang(de) .home .nav .langsw, html:lang(it) .home .nav .langsw { margin-left: 0; } }
@media (min-width: 1180px) { html:lang(fr) .home .nav .langsw { margin-left: 0; } }

/* ---------------------------------------------------------------- hero */
/* the zone leaves room for the panorama below the trust line: the picture is 1920×650 (0.3385 of its width) and at
   least 1180 px wide; its hatched sky (about 90 px) slips under the chips */
.home .hero-zone { position: relative; isolation: isolate; padding-bottom: max(310px, calc(33.85vw - 90px)); }
.home .hero { overflow: visible; padding-top: 72px; }
/* the pastel stage behind the product window, with a fine guilloche like a banknote; it melts at its outer edges */
.home .hero .preview::before {
  content: ""; position: absolute; inset: -40px -56px -64px -44px; z-index: -1; border-radius: 36px;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 78% 18%, var(--guilloche) 0 1px, transparent 1px 11px),
    radial-gradient(110% 95% at 75% 15%, var(--stage-1) 0%, var(--stage-2) 55%, transparent 78%);
  -webkit-mask-image: radial-gradient(85% 85% at 60% 45%, #000 55%, transparent 100%),
    linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(85% 85% at 60% 45%, #000 55%, transparent 100%),
    linear-gradient(to right, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%);
  mask-composite: intersect;
  animation: fade 1.2s var(--ease) .2s both;
}
/* edges: transparent borders stay visible in forced-colors mode, where box-shadows are dropped */
.home .preview .window { border: 1px solid transparent; box-shadow: var(--shadow-lg); border-radius: 18px; }
.home .preview :is(.chip, .float) { border: 1px solid transparent; box-shadow: var(--pop-shadow); }

/* the engraved panorama (the crop: sky, mountains, lake, the town with its church): it rises behind the end of the
   hero at its full height, the sky dissolves into the page and the sides fade out */
.home .hero-art {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 90%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.home .hero-art img {
  display: block; position: relative; left: 50%; width: max(1180px, 100%); max-width: none; height: auto;
  transform: translateX(-50%); opacity: .9;
}

/* the trust line: spaced capitals on frosted chips, readable over the engraving. The strip's fade keeps «both» in
   site.css, which leaves it a backdrop root after the fade, so the chips' blur would see nothing: backwards only */
.home .strip { position: relative; z-index: 1; padding-top: 36px; }
.home .strip ul { gap: 10px 12px; }
.home .strip li {
  padding: 8px 14px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); font-feature-settings: "case";
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.home .strip li::before { color: var(--accent); width: 12px; height: 12px; }
@media (min-width: 641px) { .home .strip li { letter-spacing: .05em; padding: 8px 12px; } }
/* below one row's width the four claims sit 2 + 2, never 3 + 1 (one row needs about 1100 px in Italian) */
@media (min-width: 641px) and (max-width: 1159px) {
  .home .strip ul { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 10px 12px; }
}

/* ---------------------------------------------------------------- section rhythm */
/* the tint fades in and out over 160 px, so no hard seam runs across the page */
.home #funktionen, .home section.block.alt {
  background: linear-gradient(180deg, var(--bg) 0, var(--tint) 160px, var(--tint) calc(100% - 160px), var(--bg) 100%);
  border-block: 0;
}
.home section.alt .faq details { background: var(--surface); }

/* Feature-Tour: the product window floats on a crisp pastel panel; the guilloche is a rosette inside it */
.home .tour.tabs { position: relative; isolation: isolate; }
.home .tour.tabs::before, .home .tour.tabs::after {
  content: ""; grid-area: 1 / 2; z-index: -1; margin: -34px; border-radius: 34px; pointer-events: none;
}
.home .tour.tabs::before { background: linear-gradient(150deg, var(--stage-1), var(--stage-2) 70%); }
.home .tour.tabs::after {
  background: repeating-radial-gradient(circle at 80% 22%, var(--guilloche) 0 1px, transparent 1px 12px);
  -webkit-mask-image: radial-gradient(circle at 80% 22%, #000 0 18%, transparent 46%);
  mask-image: radial-gradient(circle at 80% 22%, #000 0 18%, transparent 46%);
}
.home .tour.tabs .tour-frame { border: 1px solid transparent; border-radius: 18px; box-shadow: var(--shadow-lg); }
.home .tour.tabs .tf { border-radius: 18px; }
.home .tt { border-radius: 14px; }
.home .tt[aria-selected="true"] { border-color: transparent; box-shadow: var(--tab-shadow); }

/* ---------------------------------------------------------------- the blue plates */
.home :is(#ablauf, #preise .sec-head, .final .box) { position: relative; isolation: isolate; color: var(--band-text); }
.home :is(#ablauf, #preise .sec-head) .kicker { color: var(--band-muted); }
.home :is(#ablauf, #preise .sec-head) .kicker::before { background: var(--band-accent); }
.home :is(#ablauf, #preise .sec-head, .final) h2 { color: var(--band-text); }
.home :is(#ablauf, #preise .sec-head) p { color: var(--band-muted); }
.home :is(#ablauf, #preise .sec-head) :focus-visible { outline-color: #fff; }

/* «In drei Schritten»: a deep-blue plate with the engraved office, three numbered cards */
.home #ablauf {
  margin: clamp(16px, 2vw, 28px) clamp(8px, 1.4vw, 20px); border-radius: var(--r-xl); border: 0;
  background-color: var(--band); background-position: right center; background-size: cover; background-repeat: no-repeat;
}
.home #ablauf .sec-head { text-align: left; margin-inline: 0; }
/* the connector of site.css (scaleX 0 -> 1 on reveal, same timing) stays, drawn only in the two gaps between the cards
   at icon height, so it never crosses a numeral; site.css hides it when the cards stack */
.home #ablauf .steps::after { display: none; }
@media (min-width: 641px) {
  .home #ablauf .steps::after {
    display: block; top: 50px; left: 0; width: 100%; z-index: 0;
    background: repeating-linear-gradient(90deg,
      transparent 0, transparent calc((100% - 48px) / 3),
      color-mix(in srgb, var(--band-accent) 60%, transparent) calc((100% - 48px) / 3),
      color-mix(in srgb, var(--band-accent) 60%, transparent) calc((100% - 48px) / 3 + 24px));
  }
}
.home #ablauf .step {
  padding: 28px 26px 26px; border-radius: var(--r-card); border: 1px solid var(--band-line);
  background: var(--band-card);
}
.home #ablauf .step::before {
  content: counter(step, decimal-leading-zero); top: 24px; right: 24px; left: auto; width: auto; height: auto;
  display: block; background: none; box-shadow: none; border-radius: 0;
  color: var(--band-accent); font: 800 46px/1 var(--font-display); letter-spacing: -.04em;
}
/* the icon as a quiet outlined tile: the numeral is the card's one focal point */
.home #ablauf .step-ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 22px; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
.home #ablauf .step-ic .i { width: 22px; height: 22px; stroke-width: 1.8; }
.home #ablauf .step h3 { color: #fff; font-size: 1.2rem; margin: 0 0 10px; }
.home #ablauf .step p { color: var(--band-muted); }

/* Kontrolle: the approval card on a stage. The stage lives on .split (two pseudo-elements placed in the card's grid
   cell), never on the card: a pseudo-element of the card would paint over the card's own surface */
.home #kontrolle .approve { border: 1px solid transparent; border-radius: 18px; box-shadow: var(--shadow-lg); }
.home #kontrolle .split { position: relative; isolation: isolate; }
.home #kontrolle .split::before, .home #kontrolle .split::after {
  content: ""; position: absolute; grid-column: 2 / 3; grid-row: 1 / 2; inset: 0 -44px; z-index: -1;
  border-radius: 36px; pointer-events: none;
}
.home #kontrolle .split::before { background: linear-gradient(200deg, var(--stage-2), var(--stage-1)); }
.home #kontrolle .split::after {
  background: repeating-radial-gradient(circle at 22% 80%, var(--guilloche) 0 1px, transparent 1px 11px);
  -webkit-mask-image: radial-gradient(circle at 22% 80%, #000 0 22%, transparent 55%);
  mask-image: radial-gradient(circle at 22% 80%, #000 0 22%, transparent 55%);
}
@media (max-width: 1240px) { .home #kontrolle .split::before, .home #kontrolle .split::after { inset: 0 -14px; } }
@media (max-width: 980px) {
  .home #kontrolle .split::before, .home #kontrolle .split::after { grid-column: 1 / 2; grid-row: 2 / 3; inset: -20px -12px; }
}
.home .checks li .ic { border-radius: 10px; background: var(--accent-fill); color: #fff; }

/* Für jede Firma: one ledger-like panel with hairline cells instead of four floating cards */
.home .audience {
  gap: 0; border: 1px solid transparent; border-radius: var(--r-xl); background: var(--surface); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -48px rgba(14, 47, 99, .35);
}
/* the reveal stagger of site.css ([data-seq] > *) stays: its transitions are repeated, plus the hover tint */
.home .aud {
  border: 0; border-radius: 0; background: transparent; padding: 36px 28px 34px; box-shadow: -1px -1px 0 var(--line);
  transition: opacity .6s var(--ease) var(--sd, 0s), transform .6s var(--ease) var(--sd, 0s), translate .3s var(--ease),
    background-color .25s var(--ease);
}
.home .aud:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.home .aud .ic { width: auto; height: auto; background: none; box-shadow: none; justify-content: start; color: var(--accent); }
.home .aud .ic .i { width: 30px; height: 30px; stroke-width: 1.35; }
.home .aud b { font-size: 1.1rem; margin: 30px 0 8px; }
@media (min-width: 641px) and (max-width: 1120px) { .home .audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Preise: the header as a blue plate with the engraved ledger and scales, the cards below it */
.home #preise .sec-head {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 48px;
  align-items: end; text-align: left; margin: 0 0 40px; padding: clamp(36px, 5vw, 64px) clamp(28px, 5vw, 64px);
  border-radius: var(--r-xl);
  background-color: var(--band); background-position: right center; background-size: auto 100%; background-repeat: no-repeat;
}
.home #preise .sec-head > .kicker { grid-column: 1; justify-self: start; }
.home #preise .sec-head > h2 { grid-column: 1; margin: 0; }
.home #preise .sec-head > p { grid-column: 2; grid-row: 2; margin: 0; max-width: 46ch; color: #fff; }
.home .interval { margin: 0 0 36px; }
.home :is(.price-card, .included) { border: 1px solid transparent; }
.home .price-card { border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(14, 47, 99, .05), 0 0 0 1px var(--line); }
.home .price-card.hl { box-shadow: var(--hl-shadow); }
.home .price-card .amount { font-size: 40px; }
.home .price-card .amount.text { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.home .included { border-radius: var(--r-card); background: var(--tint); }
/* four 234-px cards: «Essayer gratuitement» / «Provare gratuitamente» stay on one line */
@media (min-width: 1001px) and (max-width: 1159px) {
  .home .price-card { padding-inline: 20px; }
  .home .price-card .btn { padding-inline: 12px; }
}
@media (forced-colors: active) { .home .price-card.hl { border: 2px solid Highlight; padding: 23px; } }

/* FAQ */
.home .faq details { border-radius: 16px; }
.home .faq-more { max-width: 760px; margin: 28px auto 0; text-align: center; color: var(--text-2); font-size: var(--fs-body-sm);
  text-wrap: balance; }

/* the final call to action: the blue-toned Alps, the words on a scrim that ends where the mountains begin, as wide
   as the «In drei Schritten» plate */
.home .final .container { max-width: none; padding-inline: clamp(8px, 1.4vw, 20px); }
.home .final .box {
  --pad-b: clamp(150px, 17vw, 240px);
  --scrim: linear-gradient(180deg, rgba(9, 30, 68, .72) 0%, rgba(9, 30, 68, .54) calc(100% - var(--pad-b)), rgba(9, 30, 68, 0) 100%);
  border: 1px solid transparent; border-radius: var(--r-xl);
  padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 48px) var(--pad-b);
  background-color: var(--band); background-image: var(--scrim);
  background-position: center bottom; background-size: cover; background-repeat: no-repeat;
  /* scrim and photo both start at the outer edge: with the default padding-box origin the photo reached under the
     1-px transparent border (kept for forced colours) while the scrim did not, a bright hairline along the top */
  background-origin: border-box;
}
.home .final h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.025em; }
.home .final p { color: #fff; }
.home .final .btn { border-radius: 12px; }
.home .final .btn.outline { background: rgba(9, 30, 68, .45); border-color: rgba(255, 255, 255, .85); }
.home .final .btn.outline:hover { background: rgba(9, 30, 68, .62); }
/* focus on the sky: a white ring flanked by deep blue holds on any pixel and does not melt into the white button */
.home .final .box :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #0b2550; }

/* ---------------------------------------------------------------- the plates' images, loaded on approach
   Each image arrives when the section before it (or the plate itself) has been revealed, or when the visitor jumps
   straight to it (:target), so the first view loads none of them. The triggers are anchored on the neighbouring
   section, not on body: a body-level :has() re-ran on every reveal. Without the reveal (no JS, reduced motion: html
   has no .rv) they load at once. */
html:not(.rv) .home #ablauf,
.home #funktionen:has(.sec-head.in) ~ #ablauf,
.home #ablauf:has(.sec-head.in),
.home #ablauf:target {
  background-image: url("/assets/img/site/band-buero-v1.webp");
  background-image: image-set(url("/assets/img/site/band-buero-v1.avif") type("image/avif"),
    url("/assets/img/site/band-buero-v1.webp") type("image/webp"));
}
html:not(.rv) .home #preise .sec-head,
.home #kontrolle:has(.sec-head.in) ~ #preise .sec-head,
.home #preise .sec-head.in,
.home #preise:target .sec-head {
  background-image: url("/assets/img/site/band-stillleben-v1.webp");
  background-image: image-set(url("/assets/img/site/band-stillleben-v1.avif") type("image/avif"),
    url("/assets/img/site/band-stillleben-v1.webp") type("image/webp"));
}
html:not(.rv) .home .final .box,
.home #preise:has(#pricing.in) ~ .final .box,
.home .final .box.in {
  background-image: var(--scrim), url("/assets/img/site/band-alpen-v2.webp");
  background-image: var(--scrim), image-set(url("/assets/img/site/band-alpen-v2.avif") type("image/avif"),
    url("/assets/img/site/band-alpen-v2.webp") type("image/webp"));
}

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 980px) {
  .home .hero .preview::before { inset: -24px -20px -40px -20px; }
  .home #preise .sec-head { grid-template-columns: minmax(0, 1fr); background-position: 70% center; }
  .home #preise .sec-head > p { grid-column: 1; grid-row: auto; margin-top: 14px; }
}
@media (max-width: 640px) {
  .home .hero { padding-top: 40px; }
  .home .hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 2.25rem); }
  /* phones: twice the screen wide and shifted so the church and the peak both stay in view */
  .home .hero-zone { padding-bottom: calc(71vw - 50px); }
  .home .hero-art img { width: 210vw; transform: translateX(-56%); }
  /* one chip per line, each on one line: four short claims read as a list, not as wrapped pills */
  .home .strip ul { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .home .strip li { font-size: .75rem; letter-spacing: .02em; padding: 7px 10px; gap: 6px; }
  /* the office sits at the top of the plate at its own scale, not stretched over the whole height */
  .home #ablauf { margin-inline: 8px; border-radius: 22px; background-size: 200% auto; background-position: 85% 0; }
  .home #ablauf .step::before { font-size: 38px; }
  .home #preise .sec-head { margin-inline: -12px; padding: 36px 20px; border-radius: 22px; }
  .home .aud { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 16px; padding: 22px; }
  .home .aud .ic { grid-row: 1 / span 2; }
  .home .aud b { margin: 2px 0 4px; }
  .home .final .box { border-radius: 22px; }
}
@media (max-width: 360px) {
  .home .strip li { font-size: .68rem; padding-inline: 10px; border-radius: 14px; text-wrap: balance; text-align: center;
    justify-content: center; }
}