/* 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 ---------- */

/* .dentro traegt denselben Deckel wie .largo.
   -------------------------------------------------------------------------
   Es hatte lange gar keinen. Das faellt bis rund 1200 px Fensterbreite nicht
   auf, weil der Abschnitt dort ohnehin schmaler ist als der Deckel: beide
   Kaesten sind dann gleich breit. Erst darueber laeuft .dentro weiter, waehrend
   seine Geschwister mit .largo bei 1120 px stehen bleiben und sich mittig
   setzen. Auf einem grossen Bildschirm stand die Ueberschrift einer Seite
   deshalb ganz links am Rand und das Kartenraster darunter in der Mitte.
   Der Baustein steht achtzehnmal auf allen zehn Seiten, es betraf also jede. */
.dentro,
.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);
}

/* ---------- Chiusura ----------
   Nur da, wenn heute eine Schliessung in der App eingetragen ist, siehe
   functions/_middleware.js. Ein Streifen im Dokumentfluss, nicht fest
   positioniert: er steht vor der Kopfzeile und schiebt sie einfach nach
   unten, kein Ueberlappen, keine eigene Scroll-Rechnung noetig. */
.chiusura-avviso {
  background: var(--ossido);
  color: var(--crema);
  padding: 12px var(--margine);
  text-align: center;
}
.chiusura-avviso p {
  margin: 0 auto;
  max-width: var(--largo);
  font-size: var(--t-piccolo);
  font-weight: 600;
}
.chiusura-avviso a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 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);
}
/* Vor dem ersten Eintrag zaehlt sonst der Innenabstand der Schublade UND das
   eigene Polster des Links zusammen, macht den Abstand zum Rand groesser als
   den Abstand zwischen zwei Eintraegen. Vier Pixel gleichen genau das aus,
   in beiden Breiten unten, weil sich die Differenz zufaellig deckt. */
.tendina__nav a:first-child { padding-top: 4px; }

.tendina__wa {
  margin-top: 26px;
  text-align: center;
}

/* Die drei Rechtslinks, unten in der Schublade, leise wie im Fuss der Seite.
   Ohne sie fuehrte die Schublade nirgendwohin, wo man sie sonst findet: in
   der Fusszeile stehen sie nur, wenn man bis ganz nach unten scrollt. */
.tendina__leg {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--filo-chiaro);
  font-size: var(--t-piede);
  color: var(--su-secondo);
  text-align: center;
}
.tendina__leg a { color: var(--azione); text-decoration: none; }
.tendina__leg a:hover { text-decoration: underline; text-underline-offset: 3px; }

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;
  }
}

/* ---------- 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; }

/* Bild links, Text rechts. Nur am Rechner.
   -------------------------------------------------------------------------
   Ein Abschnitt mit Bild stapelt sich: Ueberschrift, Text, Bild, Liste. Am
   Telefon ist das richtig. Am Rechner wird daraus ein sehr breites Bild ueber
   der ganzen Spalte und ein schmaler Textstreifen darunter, und der Abschnitt
   wird unnoetig hoch.

   Ab 1100 px stehen Bild und Text deshalb nebeneinander, das Bild links und
   kleiner. Darunter bleibt alles wie es war, iPad hochkant eingeschlossen.

   DIE REIHENFOLGE IM MARKUP AENDERT SICH NICHT. Das Bild steht in vier der
   fuenf Abschnitte mitten im Text, und wer es im HTML nach vorn zieht, um das
   Nebeneinander einfacher zu bekommen, aendert damit das abgenommene Bild am
   Telefon: dort stuende dann die Aufnahme vor der Ueberschrift. Deshalb wird
   nur gerastert und nicht umgestellt.

   Das Bild belegt Spalte eins und ueberspannt die Zeilen, alles andere geht
   in Spalte zwei. Die Ueberspannung ist grosszuegig gesetzt: leere Zeilen
   ohne Inhalt sind null hoch und kosten nichts, eine zu knappe Spannung
   liesse den Text unter dem Bild weiterlaufen. */
@media (min-width: 1100px) {
  .accanto {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 56px;
    align-content: start;
  }
  /* Das Bild ist GENAU so hoch wie der Text daneben.
     -----------------------------------------------------------------------
     Das ist der Kern dieser Fassung. Vorher stand das Bild in seinem eigenen
     Seitenverhaeltnis da, war fast immer hoeher als der Text und liess eine
     Leerstelle: unter dem Text oder neben dem Bild, je nachdem, wer laenger
     war. Genau das hat der Kunde beanstandet.

     Damit das Bild sich der Texthoehe fuegt, darf es seine eigene Hoehe nicht
     mehr in das Raster einbringen. Deshalb liegt es absolut im Rahmen: der
     Rahmen wird von den Textzeilen aufgespannt, das Bild fuellt ihn und wird
     beschnitten, nicht gestaucht.
     min-height faengt den Fall ab, dass der Text sehr kurz ist. */
  .accanto > .figura {
    grid-column: 1;
    grid-row: 1 / span 24;
    align-self: stretch;
    position: relative;
    overflow: hidden;
    min-height: 300px;
    margin: 0;
    border-radius: 2px;
  }
  .accanto > .figura img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Bild, dessen Motiv oben im Rahmen sitzt. Der Beschnitt nimmt dann unten
     weg statt in der Mitte. Gebraucht fuer die Zertifikatswand: die vier
     Rahmen laufen von oben nach unten diagonal, ein mittiger Beschnitt
     koepft den obersten. Nur hier, deshalb der Zusatz am Bild. */
  .accanto > .figura--cima img { object-position: 50% 0; }
  /* Das Gutscheinbild wird ebenso links gesetzt, aber NICHT beschnitten.
     Es ist keine Aufnahme, sondern eine gestaltete Karte: ein Anschnitt
     wuerde die Gestaltung zerschneiden. Es behaelt darum sein
     Seitenverhaeltnis und steht oben buendig. */
  .accanto > .buono {
    grid-column: 1;
    grid-row: 1 / span 24;
    align-self: start;
    max-width: none;
    margin: 0;
  }
  .accanto > :not(.figura):not(.buono) { grid-column: 2; }

  /* Die Kontaktliste steht ab 760 px dreispaltig und mittig, das ist fuer die
     volle Rasterbreite gedacht. In der halben Spalte daneben waeren die drei
     Spalten je 170 px breit und die Adresse braeche um. Hier gilt deshalb
     wieder die gestapelte Fassung, linksbuendig. */
  .accanto > .dati {
    display: block;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Abstaende richten sich sonst nach der NACHBARSCHAFT IM MARKUP, und die
     stimmt hier nicht mehr mit dem ueberein, was man sieht. Das Bild steht im
     Markup mitten im Text, in der Spalte daneben folgt aber Text auf Text.
     Eine Regel wie ".figura + .blocco" hat den Abstand deshalb verkleinert,
     weil sie ein Bild darueber annahm, und die Liste klebte am Absatz.
     Also: was im Markup auf das Bild folgt, bekommt den Abstand, den es
     bekaeme, wenn das Bild nicht dazwischenstuende. */
  .accanto > .figura + .blocco { margin-top: 46px; }
  .accanto > .figura + .testo { margin-top: 14px; }
  .accanto > .figura + h2,
  .accanto > .figura + h3 { margin-top: 44px; }
  /* Das oberste Element der Textspalte traegt keinen eigenen Abstand. */
  .accanto > :not(.figura):first-child,
  .accanto > .figura:first-child + * { margin-top: 0; }
}

/* 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 {
  --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;
}

/* Das Kaufmanns-Und aus dem Fliesstextschnitt holen. Fraunces steht als feste
   Instanz mit WONK 1, und deren Zierform des & sieht aus wie ein eingekreistes
   Zeichen: "Exfo&White" liest sich als "Exfo(R)White" und behauptet damit ein
   eingetragenes Warenzeichen, das es nicht gibt. Nur an dieser einen Stelle,
   deshalb haengt die Regel an einem eigenen Zusatz und nicht am Titel. */
.e-comm { font-family: var(--f-testo); font-weight: 600; }
.scheda__sotto {
  font-family: var(--f-titoli);
  font-size: 15.5px;
  color: var(--ossido);
  margin: 0 0 10px;
}
.scheda .minuto { margin-bottom: 16px; }

/* Kurze Vorteile untereinander, mit Haarlinien wie .linee. Fuer Karten, die
   keinen Fliesstext brauchen, etwa die Produktlinien. */
.scheda__punti {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: var(--t-piccolo);
  color: var(--su-corpo);
}
.scheda__punti li {
  padding: 8px 0;
  border-top: 1px solid var(--filo);
}
.scheda__punti li:first-child { border-top: 0; padding-top: 0; }

/* 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; }

/* Variante fuer die Formazione-Sektion auf /studio. Als einzige Liste im
   System hatte .linee keine Breitenbegrenzung und lief auf breiten Schirmen
   fast randlos, waehrend der Text linksbuendig stehen blieb. Eigene Klasse
   und nicht .linee direkt: dieselbe Liste steht unveraendert auf der
   Startseite (Teaser im dunklen Abschnitt) und als .linee--vie auf der
   404-Seite, eine unbegrenzte Regel haette beide mitveraendert.
   Nicht zentriert wie .dati auf /contatti: .dati steht dort als eigenes
   Geschwister ausserhalb von .dentro. Hier steht die Liste direkt hinter
   der Ueberschrift INNERHALB von .dentro, linksbuendig wie .testo und
   .guida, also bleibt sie das auch, nur mit Breitenriegel und Spalten
   ab 760px. Vier Eintraege passen zu zweit nebeneinander. */
@media (min-width: 760px) {
  .linee--formazione {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 32px;
    max-width: 640px;
  }
  /* Ohne Grid traegt nur der letzte Eintrag border-bottom (:last-child).
     In zwei Spalten braucht die ganze letzte Zeile eine untere Linie,
     hier also die letzten beiden von vier Eintraegen. */
  .linee--formazione li:nth-last-child(-n+2) { border-bottom: 1px solid var(--filo); }
}

/* 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; }
/* Auf /contatti steht die Liste seit dem Umbau INNERHALB des Textblocks und
   folgt dort auf das Bild. Ohne diese Zeile faellt sie auf die 30 px zurueck
   und stuende am Telefon enger als bisher. */
.figura + .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, als Umschlag. Vorher ein ausgefuelltes Zertifikat
   nach derselben Vorlage wie das echte PDF, erst leer, dann mit
   Beispielangaben. Beides verwirrte: leere Felder verkaufen kein Geschenk,
   und ausgefuellte sahen nach einem echten Stueck aus. Jetzt zeigt das Bild
   nur die Marke, gross, auf Ossido, mit der Kranzfassung dort, wo bei einem
   Umschlag das Siegel sass. Keine Felder mehr, also auch keine Verwechslung
   und kein erklaerender Zusatztext noetig. */
.buono {
  margin: 26px 0 0;
  max-width: 420px;
}
/* Auf der Gutscheinseite ist die Karte die Hauptsache und nicht die Beigabe,
   dort steht sie deshalb groesser. Auf der Startseite bleibt sie bei 420. */
@media (min-width: 820px) {
  .centro .buono { max-width: 560px; }
}
.centro .buono { margin-left: auto; margin-right: auto; }
.buono + .btn,
.buono + .azioni { margin-top: 30px; }
.buono img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--filo);
  border-radius: 2px;
}

/* Auswahl und Vorschau nebeneinander, sobald Platz ist.
   -------------------------------------------------------------------------
   Jede Gruppe des Formulars ist auf die Lesespalte begrenzt, rund 450 px.
   Das ist fuer den Fliesstext richtig und fuer eine Reihe Schalter unnoetig:
   ab dem iPad stand alles in einer schmalen Spalte links und die rechte
   Haelfte der Seite blieb leer.

   Jetzt stehen links die Auswahl und rechts die Vorschau der Nachricht. Die
   Vorschau gehoert dorthin: man sieht beim Waehlen zu, wie der Text entsteht.

   Der Knopf bleibt AUSSERHALB von .scelta und damit unter der Auswahl. Das
   ist keine Nachlaessigkeit: .scelta ist ohne JavaScript ausgeblendet, und
   ein Knopf darin waere dann mit verschwunden. Er traegt eine gueltige
   WhatsApp-Adresse auch ohne Skript. */
/* 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; }

/* Auswahl und Vorschau nebeneinander, sobald Platz ist.
   -------------------------------------------------------------------------
   Jede Gruppe des Formulars ist auf die Lesespalte begrenzt, rund 450 px.
   Das ist fuer Fliesstext richtig und fuer eine Reihe Schalter unnoetig: ab
   dem iPad stand alles in einer schmalen Spalte links und die rechte Haelfte
   der Seite blieb leer.

   Jetzt stehen die drei Gruppen nebeneinander und die Vorschau darunter ueber
   die volle Breite. Sie ist das Ergebnis der drei Gruppen und gehoert nicht
   neben eine davon.

   Importo bekommt die breiteste Spalte, sonst faellt "Altro" als vierter
   Schalter in eine zweite Zeile, waehrend daneben Platz frei ist.

   DIESER BLOCK MUSS NACH .scelta__specchio STEHEN. Er stand einmal davor, und
   die spaetere Grundregel hat max-width zurueckgesetzt: die Vorschau spannte
   dann zwar ueber alle drei Spalten, blieb aber auf 450 px gedeckelt und sah
   aus, als haette die Regel gar nicht gegriffen.

   Der Knopf bleibt AUSSERHALB von .scelta und damit unter der Auswahl. Das
   ist keine Nachlaessigkeit: .scelta ist ohne JavaScript ausgeblendet, und
   ein Knopf darin waere dann mit verschwunden. Er traegt auch ohne Skript
   eine gueltige WhatsApp-Adresse. */
@media (min-width: 820px) {
  .js .scelta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .8fr);
    column-gap: 40px;
    align-items: start;
  }
  .scelta__gruppo { max-width: none; margin-bottom: 0; }
  .scelta__specchio {
    grid-column: 1 / -1;
    max-width: none;
    margin: 34px 0 0;
  }
}
@media (min-width: 1100px) {
  .js .scelta { column-gap: 56px; }
}

/* ---------- 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; }
}

/* Der Text auf dem Hero waechst auf grossen Schirmen mit.
   -------------------------------------------------------------------------
   Der Hero laeuft randlos ueber die ganze Breite, das bleibt so. Ein Versuch,
   ihn ab 2000 px seitlich einzufassen, ist wieder heraus: der cremefarbene
   Rand links und rechts sah nicht gut aus.

   Das Problem war ohnehin ein anderes. Die Schrift stand auf jedem Schirm auf
   40 px, also auf Telefongroesse. Auf einem grossen Bildschirm blieb davon ein
   kleiner Textblock unten links uebrig, darueber neun Zehntel leere Flaeche.
   Nicht der Hero war zu breit, der Text war zu klein.

   NUR der Hero waechst hier. Seitenueberschriften, Fliesstext und der Rahmen
   bleiben unberuehrt: der Hero ist die einzige Stelle, die eine ganze
   Bildschirmhoehe fuellen muss.

   Warum Breite UND Hoehe abgefragt werden: die beiden Regeln fuer niedrige
   Geraete weiter oben setzen die Ueberschrift auf 34 und 31 px. Sie stehen
   frueher in der Datei, gaeben also nach. Bei 1366 x 768, dem haeufigsten
   Notebook, greift die 790er Regel aber mit, und dort SOLL die grosse Schrift
   gewinnen, deshalb stehen diese Bloecke danach. Ein breites, aber flaches
   Fenster, etwa 1920 x 600, faellt durch die Hoehenbedingung heraus und
   behaelt die gestraffte Fassung. */
@media (min-width: 1280px) and (min-height: 700px) {
  .hero .occhiello { font-size: 12px; }
  .hero h1 { font-size: 64px; margin: 20px 0; }
  .hero__guida { font-size: 20px; max-width: 34ch; margin-bottom: 32px; }
  .hero .btn { font-size: 16px; padding: 17px 30px; }
  .hero__in { padding-bottom: 80px; }
}
@media (min-width: 1700px) and (min-height: 800px) {
  .hero .occhiello { font-size: 13px; }
  .hero h1 { font-size: 88px; margin: 26px 0; }
  .hero__guida { font-size: 24px; margin-bottom: 40px; }
  .hero .btn { font-size: 18px; padding: 20px 36px; }
  .hero__in { padding-bottom: 100px; }
}
/* Die groesste Stufe verlangt 1100 px Fensterhoehe und nicht 1000. Bei
   2200 x 1000 fuellte der Textblock sonst 88 % der Hero-Hoehe und stand damit
   fast von Kante zu Kante. Mit der Huerde faellt so ein Fenster auf die
   88er-Stufe zurueck und landet bei knapp drei Vierteln. */
@media (min-width: 2200px) and (min-height: 1100px) {
  .hero .occhiello { font-size: 14px; }
  .hero h1 { font-size: 112px; margin: 32px 0; }
  .hero__guida { font-size: 28px; margin-bottom: 48px; }
  .hero .btn { font-size: 20px; padding: 22px 40px; }
  .hero__in { padding-bottom: 120px; }
}

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

.piede {
  background: var(--ossido);
  color: #E6D5CE;
  text-align: center;
  padding: 46px var(--margine) 0;
  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 32px;
  font-size: var(--t-piede);
  opacity: .78;
}
.piede a { color: #E6D5CE; }

@media (min-width: 820px) {
  .piede {
    padding: 52px var(--margine) 0;
    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 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(243, 236, 225, .2);
  }
}

/* Signaturleiste unter der Fusszeile. Inchiostro ist eine Stufe dunkler als
   Ossido, damit sich die Zeile absetzt, ohne eine zweite Buntfarbe
   einzufuehren. Die negativen Seitenabstaende heben den Innenabstand der
   Fusszeile auf, dadurch reicht das Band bis an beide Kanten. */

.credito {
  margin: 0 calc(var(--margine) * -1);
  padding: 15px var(--margine);
  background: var(--inchiostro);
  border-top: 1px solid rgba(243, 236, 225, .2);
  font-size: var(--t-piede);
  letter-spacing: .06em;
  color: rgba(243, 236, 225, .6);
  text-align: center;
}
.credito a {
  color: var(--crema);
  font-weight: 600;
  text-decoration: none;
}
.credito a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 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,
.chiusura-avviso 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;
  }
}