/* MEORI Skin Studio
   Neu geschriebenes Stylesheet. Werte stammen aus SISTEMA.md und aus dem
   abgenommenen Zustand der Startseite.

   Gliederung
   1  Schriften
   2  Token
   3  Flaechen
   4  Grundlagen
   5  Typografie
   6  Aktionen
   7  Raster
   8  Kopfzeile
   9  Menue
   10 Abschnitte und Seitenkopf
   11 Karten
   12 Listen
   13 Fliesstextseiten
   14 Hero, nur Startseite
   15 Fusszeile
   16 Tastatur und Bewegung

   Regel fuer alle Zusaetze: Farbe wird nie direkt gesetzt, sondern ueber die
   Flaechentoken in Teil 3. Dadurch kann eine Regel nie in einen Abschnitt
   hineinwirken, fuer den sie nicht gedacht ist.
*/

/* ---------- 1  Schriften ---------- */

/* Fraunces liegt als feste Instanz vor: wght 600, opsz 14, SOFT 40, WONK 1.
   Sie wird deshalb als Schnitt 400 gefuehrt und nie fett gestellt. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/fraunces-c3.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/public-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/font/public-sans-600.woff2') format('woff2');
}

/* ---------- 2  Token ---------- */

:root {
  /* Palette */
  --crema: #F3ECE1;
  --guscio: #E7DCCB;
  --ossido: #6E241C;
  --inchiostro: #241715;
  --ombra: #6C5B4F;
  --filo-chiaro: #DCCEB8;
  --filo-scuro: rgba(243, 236, 225, .24);
  --corpo-scuro: #EEDDD7;
  --secondo-scuro: #DCBDB4;

  /* Schriftfamilien */
  --f-testo: 'Public Sans', -apple-system, system-ui, sans-serif;
  --f-titoli: 'Fraunces', Georgia, serif;

  /* Schriftgroessen */
  --t-hero: 40px;
  --t-pagina: 32px;
  --t-sezione: 28px;
  --t-blocco: 22px;
  --t-guida: 14.5px;
  --t-corpo: 15px;
  --t-piccolo: 14px;
  --t-occhiello: 10px;
  --t-piede: 11px;

  /* Raster */
  --margine: 22px;
  --largo: 1120px;
  --stretto: 660px;
  /* Lesespalte. In em gemessen, damit die Zeilenlaenge an der Schriftgroesse
     haengt und nicht an der Geraetebreite. 30em ergeben rund 68 Zeichen.
     660 px waeren bei 15 px rund 100 Zeichen und damit zu lang. */
  --colonna: 30em;
  --barra: 60px;
  --sezione-su: 56px;
  --sezione-giu: 60px;
}

@media (min-width: 760px) {
  :root {
    --t-pagina: 40px;
    --t-sezione: 34px;
    --t-blocco: 24px;
    --margine: 40px;
    --barra: 74px;
  }
}

/* ---------- 3  Flaechen ---------- */

/* Jede Flaeche setzt dieselben sechs Token neu. Alle Bausteine lesen nur
   diese Token, nie eine Palettenfarbe direkt. */
:root,
.chiara {
  --sfondo: var(--crema);
  --su-titolo: var(--inchiostro);
  --su-corpo: var(--inchiostro);
  --su-secondo: var(--ombra);
  --filo: var(--filo-chiaro);
  --bordo-campo: var(--ombra);
  --azione: var(--ossido);
  --su-azione: var(--crema);
}

.guscio-su {
  --sfondo: var(--guscio);
  --su-titolo: var(--inchiostro);
  --su-corpo: var(--inchiostro);
  --su-secondo: var(--ombra);
  --filo: var(--filo-chiaro);
  --bordo-campo: var(--ombra);
  --azione: var(--ossido);
  --su-azione: var(--crema);
}

.scura {
  --sfondo: var(--ossido);
  --su-titolo: var(--crema);
  --su-corpo: var(--corpo-scuro);
  --su-secondo: var(--secondo-scuro);
  --filo: var(--filo-scuro);
  --bordo-campo: rgba(243, 236, 225, .55);
  --azione: var(--crema);
  --su-azione: var(--ossido);
}

/* ---------- 4  Grundlagen ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* Die Site ist hell gestaltet. Ohne diese Angabe faerbt iOS im dunklen
   Systemmodus Formularfelder, Auswahlfarbe und Rollbalken selbst um. */
:root { color-scheme: light; }

body {
  background: var(--crema);
  color: var(--su-corpo);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Kurze Seiten wie die 404 fuellen den Schirm nicht. Ohne diese drei
     Zeilen bliebe unter der Fusszeile ein cremefarbener Streifen stehen. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

/* Sprungmarke. Ausserhalb des Fokus vollstaendig weggeschnitten, damit sie
   keine Box mit Breite hinterlaesst und keinen Querlauf erzeugen kann. */
.salta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.salta:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  background: var(--ossido);
  color: var(--crema);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  padding: 12px 18px;
  text-decoration: none;
}

/* ---------- 5  Typografie ---------- */

h1, h2, h3, h4 {
  font-family: var(--f-titoli);
  font-weight: 400;
  color: var(--su-titolo);
  margin: 0;
  letter-spacing: 0;
}

p, ul, ol, dl { margin: 0; }

.occhiello {
  font-family: var(--f-testo);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--su-secondo);
  margin: 0;
}

.t-hero    { font-size: var(--t-hero);    line-height: 1.12; }
.t-pagina  { font-size: var(--t-pagina);  line-height: 1.22; }
.t-sezione { font-size: var(--t-sezione); line-height: 1.22; }
.t-blocco  { font-size: var(--t-blocco);  line-height: 1.25; }

/* Kurzer Vorspann unter einer Ueberschrift */
.guida {
  font-size: var(--t-guida);
  color: var(--su-secondo);
  margin: 0;
  max-width: var(--colonna);
}

/* Fliesstext */
.testo {
  font-size: var(--t-corpo);
  color: var(--su-corpo);
  margin: 0;
  max-width: var(--colonna);
}

/* In mittig gesetzten Abschnitten steht auch die Lesespalte mittig */
.centro .guida,
.centro .testo,
.centro .prosa {
  margin-left: auto;
  margin-right: auto;
}

.testo + .testo,
.testo + .guida { margin-top: 14px; }

/* Kleiner gesetzter Nebentext, etwa Kartenbeschreibungen */
.minuto {
  font-size: var(--t-piccolo);
  color: var(--su-secondo);
  margin: 0;
  max-width: var(--colonna);
}

/* ---------- 6  Aktionen ---------- */

.btn {
  display: inline-block;
  background: var(--azione);
  color: var(--su-azione);
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.6;
  padding: 14px 24px;
  border: 0;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
}
.btn:active { opacity: .86; }

.lnk {
  display: inline-block;
  font-family: var(--f-testo);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--azione);
  text-decoration: none;
  border-bottom: 1.5px solid var(--azione);
  padding-bottom: 2px;
}

/* ---------- 7  Raster ---------- */

.largo {
  max-width: var(--largo);
  margin-left: auto;
  margin-right: auto;
}

.stretto {
  max-width: var(--stretto);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 8  Kopfzeile ---------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--crema);
  border-bottom: 1px solid var(--filo-chiaro);
}

/* Ueber dem Hero der Startseite liegt die Leiste durchsichtig */
.barra--sopra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: transparent;
  transition: background .3s ease, border-color .3s ease;
}
.barra--sopra.e-piena {
  background: var(--crema);
  border-bottom-color: var(--filo-chiaro);
}

.barra__in {
  height: var(--barra);
  max-width: var(--largo);
  margin: 0 auto;
  padding: 0 var(--margine);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marchio {
  position: relative;
  display: block;
  height: 29px;
  flex: none;
}
.marchio img {
  height: 29px;
  width: auto;
}
/* Die dunkle Fassung liegt ueber der hellen und wird eingeblendet */
.marchio__pos {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .28s ease;
}
.marchio__neg { transition: opacity .28s ease; }
.barra:not(.barra--sopra) .marchio__pos { opacity: 1; }
.barra:not(.barra--sopra) .marchio__neg { opacity: 0; }
.barra--sopra.e-piena .marchio__pos { opacity: 1; }
.barra--sopra.e-piena .marchio__neg { opacity: 0; }

@media (min-width: 760px) {
  .marchio, .marchio img { height: 34px; }
}

/* Menueknopf */
.tasto-menu {
  background: none;
  border: 0;
  padding: 8px;
  margin-right: -8px;
  line-height: 0;
  cursor: pointer;
}
.tasto-menu span {
  display: block;
  width: 22px;
  height: 1.6px;
  background: var(--inchiostro);
  margin: 5px 0;
  transition: transform .26s ease, opacity .2s ease, background .3s ease;
}
.barra--sopra .tasto-menu span { background: var(--crema); }
.barra--sopra.e-piena .tasto-menu span { background: var(--inchiostro); }

.e-aperto .tasto-menu span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.e-aperto .tasto-menu span:nth-child(2) { opacity: 0; }
.e-aperto .tasto-menu span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* Menuepunkte direkt in der Leiste, erst ab 820 px */
.nav-barra { display: none; }

@media (min-width: 820px) {
  .nav-barra {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .nav-barra a {
    font-family: var(--f-testo);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    color: var(--inchiostro);
    padding: 4px 0;
    border-bottom: 1.5px solid transparent;
    transition: color .3s ease, border-color .2s ease;
  }
  .nav-barra a:hover { border-bottom-color: currentColor; }
  .nav-barra a[aria-current='page'] { border-bottom-color: currentColor; }
  .barra--sopra .nav-barra a { color: var(--crema); }
  .barra--sopra.e-piena .nav-barra a { color: var(--inchiostro); }
  .tasto-menu { display: none; }
  .tendina { display: none !important; }
}

/* ---------- 9  Menue ---------- */

.tendina {
  position: fixed;
  inset: var(--barra) 0 0;
  z-index: 25;
  background: var(--crema);
  padding: 26px var(--margine) 34px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.tendina[hidden] { display: none; }

.tendina__nav {
  max-width: var(--largo);
  margin: 0 auto;
  width: 100%;
}
.tendina__nav a {
  display: block;
  font-family: var(--f-titoli);
  font-size: 27px;
  color: var(--inchiostro);
  text-decoration: none;
  padding: 15px 0;
  border-bottom: 1px solid var(--filo-chiaro);
}

.tendina__wa {
  margin-top: 26px;
  text-align: center;
}
.tendina__ore {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ombra);
  text-align: center;
}

body.bloccato { overflow: hidden; }

@media (min-width: 760px) {
  .tendina { padding: 34px var(--margine); }
  .tendina__nav a { font-size: 32px; padding: 19px 0; }
  .tendina__wa {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .tendina__ore { max-width: var(--largo); margin-left: auto; margin-right: auto; }
}

/* ---------- 10  Abschnitte und Seitenkopf ---------- */

.sezione {
  background: var(--sfondo);
  color: var(--su-corpo);
  padding: var(--sezione-su) var(--margine) var(--sezione-giu);
}

/* Der letzte Abschnitt vor der Fusszeile sitzt etwas enger */
main > .sezione:last-child { padding-bottom: 40px; }

.centro { text-align: center; }

/* Das erste Element traegt keinen eigenen Abstand nach oben, sonst
   verdoppelt er sich mit dem Innenabstand des Abschnitts. */
.sezione > :first-child,
.dentro > :first-child { margin-top: 0; }

/* Seitenkopf der Unterseiten. Kein Bild, gleiche Masse wie ein Abschnitt. */
.testata { padding-bottom: 44px; }

/* Ueberschriften und was darunter folgt. Gilt in jedem Abschnitt gleich. */
.occhiello + h1 { margin-top: 11px; }
.occhiello + h2 { margin-top: 11px; }
.occhiello + h3 { margin-top: 10px; }
h1 + .guida { margin-top: 14px; }
h1 + .testo { margin-top: 15px; }
h2 + .guida { margin-top: 10px; }
h2 + .testo { margin-top: 15px; }
h3 + .testo { margin-top: 13px; }

/* Eine Ueberschrift, die auf einen Absatz oder einen Block folgt, beginnt
   einen neuen Gedanken und braucht Luft darueber. */
.testo + h2, .guida + h2, .linee + h2, .passi + h2, .figura + h2,
.testo + h3, .guida + h3, .linee + h3, .passi + h3, .figura + h3 {
  margin-top: 44px;
}

/* Abstand zwischen Bloecken innerhalb eines Abschnitts */
.blocco { margin-top: 46px; }
/* Steht ein Bild darueber, reicht der kleinere Abstand */
.figura + .blocco { margin-top: 24px; }
.testo + .figura { margin-top: 26px; }

.azioni { margin-top: 30px; }
.azioni .btn + .lnk,
.azioni .btn + .sotto { margin-top: 14px; }

/* Zweitlink unter einem Knopf */
.sotto {
  display: block;
  width: max-content;
  font-family: var(--f-testo);
  font-size: 13px;
  font-weight: 600;
  color: var(--azione);
  text-decoration: none;
  border-bottom: 1.5px solid var(--azione);
  padding-bottom: 2px;
  margin-top: 14px;
}
.centro .sotto { margin-left: auto; margin-right: auto; }

/* ---------- 11  Karten ---------- */

/* Diese Bausteine liegen als helle Flaeche auf hellem wie auf dunklem
   Grund. Sie uebernehmen deshalb den vollstaendigen Satz Guscio-Token. */
.scheda,
.scelta__specchio,
.avviso,
.buono__carta {
  --sfondo: var(--guscio);
  --su-titolo: var(--inchiostro);
  --su-corpo: var(--inchiostro);
  --su-secondo: var(--ombra);
  --filo: var(--filo-chiaro);
  --bordo-campo: var(--ombra);
  --azione: var(--ossido);
  --su-azione: var(--crema);
  color: var(--su-corpo);
}

.griglia {
  margin-top: 26px;
  display: grid;
  gap: 18px;
}

.scheda {
  background: var(--sfondo);
  border-radius: 2px;
  overflow: hidden;
}
.scheda img { width: 100%; }

.scheda__in { padding: 18px 22px 24px; }

.scheda__num {
  font-family: var(--f-testo);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--su-secondo);
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--filo);
}
.scheda__titolo {
  font-size: var(--t-blocco);
  line-height: 1.25;
  margin: 0 0 3px;
}
.scheda__sotto {
  font-family: var(--f-titoli);
  font-size: 15.5px;
  color: var(--ossido);
  margin: 0 0 10px;
}
.scheda .minuto { margin-bottom: 16px; }

/* Abgesetzte Schlusszeile einer Karte, etwa "Per chi" oder ein Hinweis */
.scheda__nota {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 1px solid var(--filo);
  font-size: var(--t-piccolo);
  color: var(--su-secondo);
  max-width: var(--colonna);
}

@media (min-width: 760px) {
  .griglia {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 32px;
  }
}
@media (min-width: 1100px) {
  .griglia { gap: 28px; }
}

/* ---------- 12  Listen ---------- */

/* Liste mit Haarlinien */
.linee {
  list-style: none;
  margin-top: 14px;
  margin-bottom: 0;
  padding: 0;
}
.linee li {
  padding: 12px 0;
  border-top: 1px solid var(--filo);
}
.linee li:last-child { border-bottom: 1px solid var(--filo); }

.linee__voce {
  display: block;
  font-size: var(--t-guida);
  line-height: 1.4;
  color: var(--su-corpo);
}
.linee__fonte {
  display: block;
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--su-secondo);
  margin-top: 4px;
}

.testo + .linee,
.guida + .linee { margin-top: 28px; }

/* Dieselbe Liste, aber die ganze Zeile ist ein Link */
.linee--vie li { padding: 0; }
.linee--vie a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  font-size: var(--t-guida);
  font-weight: 600;
  color: var(--su-corpo);
  text-decoration: none;
}
.linee--vie a span {
  font-size: 11px;
  color: var(--su-secondo);
}

/* Beschreibungsliste fuer Kontaktangaben */
.dati {
  margin-top: 30px;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
}
.dati dt {
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--su-secondo);
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--filo);
}
.dati dd {
  margin: 6px 0 0;
  font-size: 15.5px;
  color: var(--su-titolo);
}
.dati dd:last-of-type {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--filo);
}
.dentro + .dati { margin-top: 40px; }

.dati a {
  color: var(--azione);
  text-decoration: none;
  border-bottom: 1px solid var(--filo);
}

@media (min-width: 760px) {
  .dati {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 26px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
  .dati dt { grid-row: 1; }
  .dati dd { grid-row: 2; }
  .dati dd:last-of-type { padding-bottom: 18px; border-bottom: 1px solid var(--filo); }
}

/* Nummerierte Schritte */
.passi {
  list-style: none;
  counter-reset: passo;
  margin-top: 26px;
  margin-bottom: 0;
  padding: 0;
  text-align: left;
}
.passi li {
  counter-increment: passo;
  padding: 16px 0;
  border-top: 1px solid var(--filo);
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: var(--t-guida);
  color: var(--su-corpo);
}
.passi li:last-child { border-bottom: 1px solid var(--filo); }
.passi li::before {
  content: counter(passo, decimal-leading-zero);
  font-family: var(--f-testo);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--su-secondo);
  flex: none;
}

/* Unterschriftszeile unter einem Absatz */
.firma {
  display: inline-block;
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--su-secondo);
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--filo);
}

/* Bild im Textraster. Fester Zuschnitt, damit ein Austausch der Datei
   das Raster nicht verschiebt. */
.figura { margin: 0; }
.figura img {
  width: 100%;
  border-radius: 2px;
  /* leichte Waermung, damit unterschiedlich belichtete Aufnahmen
     nebeneinander ruhig wirken */
  filter: sepia(.22) saturate(1.1);
}

/* ---------- 12b  Auswahl fuer den Gutschein ---------- */

/* Die Auswahl setzt nur den Text der WhatsApp-Nachricht zusammen. Sie
   verschickt nichts und braucht keinen Server. Ohne JavaScript waere sie
   wirkungslos, darum wird sie erst eingeblendet, wenn das Skript laeuft.
   Der Knopf darunter bleibt in jedem Fall stehen und traegt den
   allgemeinen Text. */
.scelta { display: none; }
.js .scelta { display: block; }
.testo + .scelta { margin-top: 30px; }


.scelta__gruppo {
  border: 0;
  padding: 0;
  margin: 0 0 28px;
  max-width: var(--colonna);
}
.scelta__gruppo legend {
  padding: 0;
  margin-bottom: 12px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-block;
  position: relative;
}
/* Der Schalter bleibt bedienbar und mit der Tastatur erreichbar,
   sichtbar ist die Beschriftung daneben. */
.chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip__testo {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--bordo-campo);
  border-radius: 2px;
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.3;
  color: var(--su-corpo);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.chip input:checked + .chip__testo {
  background: var(--azione);
  border-color: var(--azione);
  color: var(--su-azione);
}
.chip input:focus-visible + .chip__testo {
  outline: 2px solid var(--su-titolo);
  outline-offset: 3px;
}

/* Freitextfeld. Es verschickt nichts, sein Inhalt wandert nur in den
   Text der Nachricht. Hoehe wie das Feld der Wartungsseite. */
.scelta__campo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: 46px;
  padding: 0 14px;
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  color: var(--su-corpo);
  background: transparent;
  border: 1px solid var(--bordo-campo);
  border-radius: 2px;
}
.scelta__campo::placeholder { color: var(--su-secondo); }

.scelta__nota {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--su-secondo);
}

/* Freier Betrag. Geschlossen sieht Altro aus wie 25, 50 und 75, gleiche
   Hoehe, gleicher Rahmen, gleiche Schrift. Gewaehlt oeffnet sich der
   Stufenschalter im Schalter selbst und bleibt offen, solange Altro
   gewaehlt ist. Plus und Minus sind gezeichnet, nicht gesetzt:
   Eurozeichen und echtes Minuszeichen fehlen in den Schriftdateien.
   Die Striche haben die Staerke des Menueknopfs. */
.chip--altro {
  display: inline-flex;
  align-items: stretch;
  flex: none;
  min-height: 46px;
  border: 1px solid var(--bordo-campo);
  border-radius: 2px;
  overflow: hidden;
}
.chip--altro > label {
  display: flex;
  align-items: center;
  padding: 0 18px;
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  line-height: 1.3;
  color: var(--su-corpo);
  cursor: pointer;
  transition: color .2s ease;
}
.chip--altro.e-scelto {
  background: var(--azione);
  border-color: var(--azione);
}
.chip--altro.e-scelto > label { color: var(--su-azione); }
.chip--altro input:focus-visible + label {
  outline: 2px solid var(--su-titolo);
  outline-offset: -4px;
}

.gradino {
  display: inline-flex;
  align-items: stretch;
  flex-wrap: nowrap;
}
.gradino[hidden] { display: none; }

.gradino button {
  position: relative;
  width: 44px;
  min-height: 44px;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--su-azione);
  cursor: pointer;
}
.gradino button::before,
.gradino [data-piu]::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.gradino button::before { width: 15px; height: 1.6px; }
.gradino [data-piu]::after { width: 1.6px; height: 15px; }
.gradino button:disabled {
  opacity: .3;
  cursor: default;
}
.gradino button:focus-visible {
  outline: 2px solid var(--su-azione);
  outline-offset: -4px;
}

.gradino output {
  align-self: center;
  font-family: var(--f-testo);
  font-size: var(--t-piccolo);
  font-weight: 600;
  color: var(--su-azione);
  min-width: 8ch;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Muster des Gutscheins. Gebaut, nicht fotografiert: das Gutschein-PDF ist
   noch nicht gestaltet. Spaeter ersetzt es eine Aufnahme des echten Stuecks. */
.buono {
  margin: 26px 0 0;
  max-width: 420px;
}
.centro .buono { margin-left: auto; margin-right: auto; }
.buono + .btn,
.buono + .azioni { margin-top: 30px; }
.buono__carta {
  aspect-ratio: 3 / 2;
  background: var(--sfondo);
  border: 1px solid var(--filo);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
}
.buono__marchio {
  width: 46%;
  max-width: 150px;
  height: auto;
}
.buono__riga {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(108, 91, 79, .35);
  width: 46%;
  max-width: 150px;
  text-align: center;
  font-family: var(--f-testo);
  font-size: var(--t-occhiello);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ombra);
}

/* Was tatsaechlich verschickt wird, steht sichtbar da */
.scelta__specchio {
  background: var(--sfondo);
  border-radius: 2px;
  padding: 14px 16px;
  margin: 0 0 24px;
  max-width: var(--colonna);
  font-size: var(--t-piccolo);
  color: var(--su-corpo);
}
.scelta__specchio .occhiello { margin-bottom: 6px; }

/* ---------- 13  Fliesstextseiten ---------- */

/* Lesespalte. Die Breite ist an der Schriftgroesse gemessen, damit die
   Zeilenlaenge unabhaengig vom Geraet zwischen 45 und 75 Zeichen bleibt. */
.prosa {
  max-width: var(--colonna);
  margin-left: auto;
  margin-right: auto;
}
.prosa h2 {
  font-size: var(--t-blocco);
  line-height: 1.25;
  margin: 38px 0 12px;
}
h1 + .prosa { margin-top: 24px; }
.prosa h2:first-child { margin-top: 0; }
.prosa p,
.prosa ul {
  font-size: var(--t-corpo);
  color: var(--su-corpo);
  margin: 0 0 14px;
}
.prosa ul {
  padding-left: 20px;
  list-style: disc;
}
.prosa li { margin-bottom: 6px; }
.prosa a { color: var(--azione); }
.prosa strong { font-weight: 600; }

.aggiornamento {
  margin-top: 38px;
  padding-top: 16px;
  border-top: 1px solid var(--filo);
  font-size: 13px;
  color: var(--su-secondo);
}

/* Sichtbarer Platzhalter fuer fehlende Angaben */
.manca {
  font-weight: 600;
  color: var(--ossido);
  background: var(--guscio);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}
.scura .manca {
  color: var(--ossido);
  background: var(--crema);
}

.avviso {
  background: var(--sfondo);
  border-left: 3px solid var(--ossido);
  padding: 14px 16px;
  margin: 0 0 26px;
  font-size: var(--t-piccolo);
  color: var(--inchiostro);
  border-radius: 0 2px 2px 0;
}

/* ---------- 14  Hero, nur Startseite ---------- */

.hero {
  position: relative;
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__sfondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__sfondo picture { display: block; height: 100%; }
.hero__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(.34) saturate(1.16) contrast(1.05);
}
.hero__sfondo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ossido);
  opacity: .55;
}

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(110, 36, 28, .42) 0%,
    rgba(110, 36, 28, .08) 13%,
    rgba(110, 36, 28, .06) 24%,
    rgba(110, 36, 28, .5) 59%,
    rgba(110, 36, 28, .93) 100%);
}

.hero__in {
  position: relative;
  z-index: 2;
  max-width: var(--largo);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--margine) 54px;
}
.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.12;
  color: var(--crema);
  margin: 15px 0;
}
.hero .occhiello { color: #EAD8D1; }
.hero__guida {
  font-size: 15.5px;
  color: #F2E5E0;
  max-width: 31ch;
  margin: 0 0 26px;
}
.hero .btn {
  background: var(--crema);
  color: var(--ossido);
}

/* Messpunkt fuer den Umschlag der Kopfzeile, 30 Prozent der Herohoehe */
.sentinella {
  position: absolute;
  top: 30%;
  left: 0;
  width: 1px;
  height: 1px;
}

@media (min-width: 760px) {
  .hero__in { padding-bottom: 72px; }
  .hero h1 { max-width: 15ch; }
  .hero__guida { font-size: 17px; max-width: 40ch; }
}

/* Niedrige Geraete straffen, statt ueberzulaufen */
@media (max-height: 790px) {
  .hero h1 { font-size: 34px; margin: 12px 0; }
  .hero__guida { margin-bottom: 20px; }
  .hero__in { padding-bottom: 40px; }
}
@media (max-height: 700px) {
  .hero h1 { font-size: 31px; }
}

/* ---------- 15  Fusszeile ---------- */

.piede {
  background: var(--ossido);
  color: #E6D5CE;
  text-align: center;
  padding: 46px var(--margine) 32px;
  border-top: 1px solid rgba(243, 236, 225, .2);
}

.piede__logo {
  width: 336px;
  max-width: 88%;
  margin: 0 auto 32px;
}
.piede__logo img { width: 100%; }

.piede__nav {
  display: flex;
  flex-direction: column;
}
.piede__nav a {
  font-family: var(--f-titoli);
  font-size: 20px;
  color: #E6D5CE;
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px solid rgba(243, 236, 225, .2);
}
.piede__nav a:first-child { border-top: 1px solid rgba(243, 236, 225, .2); }

.piede__leg {
  margin: 28px 0 0;
  font-size: var(--t-piede);
  opacity: .78;
}
.piede a { color: #E6D5CE; }

@media (min-width: 820px) {
  .piede {
    padding: 52px var(--margine) 30px;
    text-align: left;
  }
  .piede__in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 48px;
    max-width: var(--largo);
    margin: 0 auto;
  }
  .piede__logo {
    width: 210px;
    max-width: none;
    margin: 0;
    flex: none;
  }
  .piede__nav {
    flex-direction: row;
    gap: 34px;
  }
  .piede__nav a {
    font-family: var(--f-testo);
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    border: 0;
  }
  .piede__nav a:first-child { border-top: 0; }
  .piede__nav a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .piede__leg {
    max-width: var(--largo);
    margin: 40px auto 0;
    padding-top: 22px;
    border-top: 1px solid rgba(243, 236, 225, .2);
  }
}

/* ---------- 16  Tastatur und Bewegung ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--su-titolo);
  outline-offset: 3px;
  border-radius: 1px;
}
.hero a:focus-visible,
.piede a:focus-visible,
.barra--sopra:not(.e-piena) a:focus-visible,
.barra--sopra:not(.e-piena) button:focus-visible {
  outline-color: var(--crema);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}