/* FarmaciaOS, sito pubblico. Mondo «banconote svizzere»: carta, inchiostro, petrolio.
   Colori e carattere sono quelli del prodotto (tailwind.config.js, DESIGN.md). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/atkinson.a6af8828e8.woff2") format("woff2");
}

:root {
  --carta: #f3f5f4;
  --bianco: #ffffff;
  --inchiostro-100: #eaf0ee;
  --inchiostro-200: #dadfdd;
  --inchiostro-300: #c3c9c7;
  --inchiostro-600: #545958;
  --inchiostro-900: #212524;
  --inchiostro-950: #131716;
  --petrolio-500: #2a8f94;
  --petrolio-600: #1a565a;
  --petrolio-700: #0f3d40;
  --petrolio-800: #0a2b2d;
  --petrolio-900: #061c1e;
  --ocra-300: #deb976;
  --ocra-400: #c89732;
  --ocra-500: #ab7b00;
  /* i tagli: ogni modulo porta il colore della sua voce di menu nel prodotto */
  --taglio-cassa: #ab7b00;
  --taglio-ricette: #287f43;
  --taglio-merce: #396ab8;
  --taglio-casse: #7c57a6;
  --taglio-conti: #545958;
  --taglio-franca: #1a565a;
  --colonna: 1180px;
  --margine: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--carta); }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro-900);
  font-family: "Atkinson Hyperlegible Next", -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--petrolio-600); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--petrolio-600); outline-offset: 3px; border-radius: 2px; }
.dunkel :focus-visible { outline-color: var(--ocra-300); }
::selection { background: #cfe3e4; color: var(--petrolio-700); }
h1, h2, h3, p, dl, dd, ul, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; color: var(--inchiostro-950); }
p { text-wrap: pretty; }
ul { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: calc(var(--colonna) + 2 * var(--margine)); margin-inline: auto; padding-inline: var(--margine); }

.skip { position: absolute; left: var(--margine); top: -4rem; background: var(--bianco); color: var(--inchiostro-950); padding: .6rem 1rem; border-radius: 4px; z-index: 10; font-weight: 600; }
.skip:focus { top: .75rem; }

/* Il filo di sicurezza: la fascia del prodotto, con il guilloche stampato sopra */
.faden {
  height: 12px;
  background-color: var(--petrolio-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='12'%3E%3Cpath d='M0.00 6.00 L2.00 7.04 L4.00 8.00 L6.00 8.83 L8.00 9.46 L10.00 9.86 L12.00 10.00 L14.00 9.86 L16.00 9.46 L18.00 8.83 L20.00 8.00 L22.00 7.04 L24.00 6.00 L26.00 4.96 L28.00 4.00 L30.00 3.17 L32.00 2.54 L34.00 2.14 L36.00 2.00 L38.00 2.14 L40.00 2.54 L42.00 3.17 L44.00 4.00 L46.00 4.96 L48.00 6.00 L50.00 7.04 L52.00 8.00 L54.00 8.83 L56.00 9.46 L58.00 9.86 L60.00 10.00 L62.00 9.86 L64.00 9.46 L66.00 8.83 L68.00 8.00 L70.00 7.04 L72.00 6.00 L74.00 4.96 L76.00 4.00 L78.00 3.17 L80.00 2.54 L82.00 2.14 L84.00 2.00 L86.00 2.14 L88.00 2.54 L90.00 3.17 L92.00 4.00 L94.00 4.96 L96.00 6.00 M0.00 6.00 L2.00 4.96 L4.00 4.00 L6.00 3.17 L8.00 2.54 L10.00 2.14 L12.00 2.00 L14.00 2.14 L16.00 2.54 L18.00 3.17 L20.00 4.00 L22.00 4.96 L24.00 6.00 L26.00 7.04 L28.00 8.00 L30.00 8.83 L32.00 9.46 L34.00 9.86 L36.00 10.00 L38.00 9.86 L40.00 9.46 L42.00 8.83 L44.00 8.00 L46.00 7.04 L48.00 6.00 L50.00 4.96 L52.00 4.00 L54.00 3.17 L56.00 2.54 L58.00 2.14 L60.00 2.00 L62.00 2.14 L64.00 2.54 L66.00 3.17 L68.00 4.00 L70.00 4.96 L72.00 6.00 L74.00 7.04 L76.00 8.00 L78.00 8.83 L80.00 9.46 L82.00 9.86 L84.00 10.00 L86.00 9.86 L88.00 9.46 L90.00 8.83 L92.00 8.00 L94.00 7.04 L96.00 6.00 M0.00 10.20 L2.00 10.06 L4.00 9.64 L6.00 8.97 L8.00 8.10 L10.00 7.09 L12.00 6.00 L14.00 4.91 L16.00 3.90 L18.00 3.03 L20.00 2.36 L22.00 1.94 L24.00 1.80 L26.00 1.94 L28.00 2.36 L30.00 3.03 L32.00 3.90 L34.00 4.91 L36.00 6.00 L38.00 7.09 L40.00 8.10 L42.00 8.97 L44.00 9.64 L46.00 10.06 L48.00 10.20 L50.00 10.06 L52.00 9.64 L54.00 8.97 L56.00 8.10 L58.00 7.09 L60.00 6.00 L62.00 4.91 L64.00 3.90 L66.00 3.03 L68.00 2.36 L70.00 1.94 L72.00 1.80 L74.00 1.94 L76.00 2.36 L78.00 3.03 L80.00 3.90 L82.00 4.91 L84.00 6.00 L86.00 7.09 L88.00 8.10 L90.00 8.97 L92.00 9.64 L94.00 10.06 L96.00 10.20 M0.00 1.80 L2.00 1.94 L4.00 2.36 L6.00 3.03 L8.00 3.90 L10.00 4.91 L12.00 6.00 L14.00 7.09 L16.00 8.10 L18.00 8.97 L20.00 9.64 L22.00 10.06 L24.00 10.20 L26.00 10.06 L28.00 9.64 L30.00 8.97 L32.00 8.10 L34.00 7.09 L36.00 6.00 L38.00 4.91 L40.00 3.90 L42.00 3.03 L44.00 2.36 L46.00 1.94 L48.00 1.80 L50.00 1.94 L52.00 2.36 L54.00 3.03 L56.00 3.90 L58.00 4.91 L60.00 6.00 L62.00 7.09 L64.00 8.10 L66.00 8.97 L68.00 9.64 L70.00 10.06 L72.00 10.20 L74.00 10.06 L76.00 9.64 L78.00 8.97 L80.00 8.10 L82.00 7.09 L84.00 6.00 L86.00 4.91 L88.00 3.90 L90.00 3.03 L92.00 2.36 L94.00 1.94 L96.00 1.80 M0.00 6.00 L2.00 7.50 L4.00 8.60 L6.00 9.00 L8.00 8.60 L10.00 7.50 L12.00 6.00 L14.00 4.50 L16.00 3.40 L18.00 3.00 L20.00 3.40 L22.00 4.50 L24.00 6.00 L26.00 7.50 L28.00 8.60 L30.00 9.00 L32.00 8.60 L34.00 7.50 L36.00 6.00 L38.00 4.50 L40.00 3.40 L42.00 3.00 L44.00 3.40 L46.00 4.50 L48.00 6.00 L50.00 7.50 L52.00 8.60 L54.00 9.00 L56.00 8.60 L58.00 7.50 L60.00 6.00 L62.00 4.50 L64.00 3.40 L66.00 3.00 L68.00 3.40 L70.00 4.50 L72.00 6.00 L74.00 7.50 L76.00 8.60 L78.00 9.00 L80.00 8.60 L82.00 7.50 L84.00 6.00 L86.00 4.50 L88.00 3.40 L90.00 3.00 L92.00 3.40 L94.00 4.50 L96.00 6.00 M0.00 6.00 L2.00 4.50 L4.00 3.40 L6.00 3.00 L8.00 3.40 L10.00 4.50 L12.00 6.00 L14.00 7.50 L16.00 8.60 L18.00 9.00 L20.00 8.60 L22.00 7.50 L24.00 6.00 L26.00 4.50 L28.00 3.40 L30.00 3.00 L32.00 3.40 L34.00 4.50 L36.00 6.00 L38.00 7.50 L40.00 8.60 L42.00 9.00 L44.00 8.60 L46.00 7.50 L48.00 6.00 L50.00 4.50 L52.00 3.40 L54.00 3.00 L56.00 3.40 L58.00 4.50 L60.00 6.00 L62.00 7.50 L64.00 8.60 L66.00 9.00 L68.00 8.60 L70.00 7.50 L72.00 6.00 L74.00 4.50 L76.00 3.40 L78.00 3.00 L80.00 3.40 L82.00 4.50 L84.00 6.00 L86.00 7.50 L88.00 8.60 L90.00 9.00 L92.00 8.60 L94.00 7.50 L96.00 6.00 M0.00 9.90 L2.00 10.35 L4.00 10.50 L6.00 10.35 L8.00 9.90 L10.00 9.18 L12.00 8.25 L14.00 7.16 L16.00 6.00 L18.00 4.84 L20.00 3.75 L22.00 2.82 L24.00 2.10 L26.00 1.65 L28.00 1.50 L30.00 1.65 L32.00 2.10 L34.00 2.82 L36.00 3.75 L38.00 4.84 L40.00 6.00 L42.00 7.16 L44.00 8.25 L46.00 9.18 L48.00 9.90 L50.00 10.35 L52.00 10.50 L54.00 10.35 L56.00 9.90 L58.00 9.18 L60.00 8.25 L62.00 7.16 L64.00 6.00 L66.00 4.84 L68.00 3.75 L70.00 2.82 L72.00 2.10 L74.00 1.65 L76.00 1.50 L78.00 1.65 L80.00 2.10 L82.00 2.82 L84.00 3.75 L86.00 4.84 L88.00 6.00 L90.00 7.16 L92.00 8.25 L94.00 9.18 L96.00 9.90 M0.00 2.10 L2.00 2.82 L4.00 3.75 L6.00 4.84 L8.00 6.00 L10.00 7.16 L12.00 8.25 L14.00 9.18 L16.00 9.90 L18.00 10.35 L20.00 10.50 L22.00 10.35 L24.00 9.90 L26.00 9.18 L28.00 8.25 L30.00 7.16 L32.00 6.00 L34.00 4.84 L36.00 3.75 L38.00 2.82 L40.00 2.10 L42.00 1.65 L44.00 1.50 L46.00 1.65 L48.00 2.10 L50.00 2.82 L52.00 3.75 L54.00 4.84 L56.00 6.00 L58.00 7.16 L60.00 8.25 L62.00 9.18 L64.00 9.90 L66.00 10.35 L68.00 10.50 L70.00 10.35 L72.00 9.90 L74.00 9.18 L76.00 8.25 L78.00 7.16 L80.00 6.00 L82.00 4.84 L84.00 3.75 L86.00 2.82 L88.00 2.10 L90.00 1.65 L92.00 1.50 L94.00 1.65 L96.00 2.10' fill='none' stroke='rgb%2817%2C25%2C27%29' stroke-opacity='.32' stroke-width='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 96px 12px;
}

/* Testata */
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 14px; }
.marke { font-size: 1.45rem; font-weight: 600; letter-spacing: -.01em; color: var(--inchiostro-950); text-decoration: none; line-height: 1; }
.marke b { font-weight: 800; color: var(--ocra-500); }
.kopf__rechts { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); }
.kontakt-link { color: var(--inchiostro-900); font-weight: 500; text-decoration: none; padding-block: .6rem; }
.kontakt-link:hover { text-decoration: underline; }
.sprache ul { display: flex; gap: 2px; }
.sprache a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: .4rem;
  color: var(--inchiostro-600); font-weight: 500; text-decoration: none; letter-spacing: .01em;
}
.sprache a:hover { color: var(--inchiostro-950); text-decoration: underline; }
.sprache a[aria-current="page"] { color: var(--inchiostro-950); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Apertura */
.hero { position: relative; overflow: hidden; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 7vw, 6rem); }
.hero__raster { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr); gap: clamp(2rem, 4.5vw, 4rem); align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.5vw, 4rem); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; margin-bottom: 1.4rem; }
.hero__lead { font-size: 1.2rem; line-height: 1.55; max-width: 33rem; color: var(--inchiostro-900); }
.hero__lead2 { font-size: 1.05rem; max-width: 33rem; color: var(--inchiostro-600); margin-top: 1rem; }
.hero__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }
.knopf {
  display: inline-flex; align-items: center; min-height: 54px; padding-inline: 1.75rem;
  background: var(--ocra-400); color: var(--inchiostro-950);
  font-weight: 700; font-size: 1.1rem; text-decoration: none; border-radius: 4px;
}
.knopf:hover { background: var(--ocra-300); text-decoration: none; }
.link-stark { font-weight: 600; }

.hero__bild { position: relative; isolation: isolate; }
.hero__bild::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 122%; aspect-ratio: 1; transform: translate(-42%, -50%);
  background: url("/assets/rosetta.d0fd98c0bb.svg") center / contain no-repeat;
  opacity: .34; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bild::before { background-image: url("/assets/rosetta-anim.1a425fa284.svg"); }
}
.hero__bild picture, .hero__bild img { width: 100%; }
.hero__bild img {
  border: 1px solid var(--inchiostro-300); border-radius: 5px; background: var(--bianco);
  box-shadow: 0 24px 56px -22px rgba(17, 25, 27, .5);
  aspect-ratio: 1600 / 931;
}
.hero__bild figcaption { position: relative; display: inline-block; margin-top: 1rem; padding: .3rem .8rem; background: var(--carta); font-size: .95rem; color: var(--inchiostro-900); border-radius: 3px; }

/* Stato e prezzo: il registro, su fondo petrolio come il guscio del prodotto */
.stand { background: var(--petrolio-700); color: var(--carta); padding-block: clamp(3rem, 6vw, 5.25rem); }
.stand h2, .wer h2 { color: #fff; }
.stand__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.reg__row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; padding-block: 1.35rem; border-top: 1px solid rgba(243, 245, 244, .3); }
.reg__row:first-child { border-top: 2px solid var(--ocra-400); }
.reg__row:last-of-type { border-bottom: 1px solid rgba(243, 245, 244, .3); }
.reg dt { font-weight: 600; color: rgba(243, 245, 244, .8); padding-top: .3rem; }
.reg dd { font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.35; max-width: 34rem; }
.reg dd strong { font-weight: 700; color: #fff; }
.reg__note { margin-top: 1rem; font-size: .95rem; color: rgba(243, 245, 244, .75); }

/* Moduli: un foglio di sei tagli */
.moduli { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); }
.blatt {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--inchiostro-300); border: 1px solid var(--inchiostro-300);
  margin-block: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
}
.zelle { background: var(--bianco); padding: 0 0 1.6rem; }
.zelle::before { content: ""; display: block; height: 8px; background: var(--taglio); margin-bottom: 1.35rem; }
.zelle h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; padding-inline: 1.5rem; margin-bottom: .55rem; }
.zelle p { padding-inline: 1.5rem; color: var(--inchiostro-900); }
.zelle--cassa { --taglio: var(--taglio-cassa); }
.zelle--ricette { --taglio: var(--taglio-ricette); }
.zelle--merce { --taglio: var(--taglio-merce); }
.zelle--casse { --taglio: var(--taglio-casse); }
.zelle--conti { --taglio: var(--taglio-conti); }
.zelle--franca { --taglio: var(--taglio-franca); }
.moduli__extra { max-width: 46rem; color: var(--inchiostro-900); }

/* Schermate */
.schirme { background: var(--inchiostro-100); padding-block: clamp(3rem, 6vw, 5.25rem); }
.schirme__kopf { max-width: 44rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); }
.schirme__kopf p { margin-top: .9rem; color: var(--inchiostro-600); }
.schirm + .schirm { margin-top: clamp(2.25rem, 4vw, 3.5rem); }
.schirm__text { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; margin-bottom: 1rem; align-items: baseline; }
.schirm h3 { font-size: 1.3rem; font-weight: 700; }
.schirm__text p { max-width: 40rem; }
.schirm img {
  width: 100%; background: var(--bianco);
  border: 1px solid var(--inchiostro-300); border-radius: 5px;
}
.schirm--home img { aspect-ratio: 2000 / 851; }
.schirm--scorte img { aspect-ratio: 2000 / 1083; }
.schirm--franca img { aspect-ratio: 2000 / 993; }

/* Sicurezza */
.sicher { padding-block: clamp(3.5rem, 7vw, 6rem); }
.sicher__raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 5vw, 4rem); }
.liste li { padding-block: 1.15rem; border-top: 1px solid var(--inchiostro-300); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.45; max-width: 40rem; }
.liste li:first-child { border-top: 2px solid var(--inchiostro-900); }
.liste li:last-child { border-bottom: 1px solid var(--inchiostro-300); }

/* Chi e contatto */
.wer { position: relative; overflow: hidden; background: var(--petrolio-800); color: var(--carta); padding-block: clamp(3.5rem, 7vw, 6rem); }
.wer::after {
  content: ""; position: absolute; width: 720px; aspect-ratio: 1; right: -240px; bottom: -330px;
  background: url("/assets/rosetta-carta.23784a367d.svg") center / contain no-repeat; opacity: .16; pointer-events: none;
}
.wer__raster { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); }
.wer p { font-size: 1.15rem; margin-top: 1.1rem; max-width: 36rem; color: rgba(243, 245, 244, .92); }
.kontakt { border-top: 2px solid var(--ocra-400); padding-top: 1.25rem; }
.kontakt__name { font-size: 1.35rem; font-weight: 700; color: #fff; }
.kontakt__zeile { color: rgba(243, 245, 244, .85); }
.kontakt a:not(.knopf) { color: #fff; font-weight: 600; display: inline-block; padding-block: .35rem; }
.kontakt ul { margin-block: 1rem 1.5rem; }
.kontakt .knopf { margin-top: .25rem; }

/* Piede */
.fuss { background: var(--petrolio-900); color: rgba(243, 245, 244, .85); padding-block: 1.75rem; }
.fuss__raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; align-items: center; }
.fuss a { color: #fff; padding-block: .55rem; }
.fuss ul { display: flex; gap: 1.75rem; flex-wrap: wrap; }

/* Pagine legali */
.recht { padding-block: clamp(2.5rem, 6vw, 5rem); max-width: 46rem; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.recht h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; margin-bottom: 2rem; }
.recht h2 { font-size: 1.25rem; letter-spacing: -.005em; margin: 2rem 0 .5rem; padding-top: 1rem; border-top: 1px solid var(--inchiostro-300); }
.recht p + p { margin-top: .75rem; }
.recht__zurueck { margin-top: 2.5rem; }

/* Adattamenti */
@media (max-width: 960px) {
  .hero__raster, .stand__raster, .sicher__raster, .wer__raster { grid-template-columns: minmax(0, 1fr); }
  .blatt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__bild { max-width: 46rem; }
  .schirm__text { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}
@media (max-width: 720px) {
  .hero__bild { padding-block: 1rem 0; }
  .hero__bild picture { max-width: 17.5rem; margin-inline: auto; }
  .hero__bild img { aspect-ratio: 780 / 1688; }
  .hero__bild::before { width: 130%; transform: translate(-50%, -50%); top: 46%; }
  .hero__bild figcaption { text-align: center; margin-inline: auto; }
  .schirm--home img { aspect-ratio: 780 / 1260; }
  .schirm--franca img { aspect-ratio: 780 / 1106; }
  .schirm--scorte { display: none; }
  .schirm--home picture, .schirm--franca picture { max-width: 24rem; }
  .reg__row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .kontakt-link { display: none; }
  .kopf { padding-block: 10px; }
}
@media (max-width: 600px) {
  .blatt { grid-template-columns: minmax(0, 1fr); }
  .hero__aktion { flex-direction: column; align-items: flex-start; }
  .knopf { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}