@import url("../font/schriften.css");
@import url("schatteneffekte.css");

/* =========================================================================
   CAVALERI SRL — Design-System
   Farbwelt aus der Marke: weiße Fahrzeuge, Schriftzug in Marineblau.
   Heller, sauberer Auftritt; Marineblau trägt Kopf, Hero und Fuß.
   Leitmotiv "la linea": eine durchgehende Linie führt durch die Seite —
   von der Rampe in Caltanissetta bis nach Europa.
   ========================================================================= */

:root{
  /* Marke */
  --blu:        #1a3a8f;   /* aus der Aufliegerbeschriftung gemessen */
  --blu-scuro:  #0b1b45;   /* Tiefe: Hero, Karte, Fuß */
  --blu-medio:  #244cb3;   /* Hover */
  --blu-chiaro: #e9eefa;   /* getönte Fläche */
  --segnale:    #3b7be0;   /* Akzent für Flächen, Linien, Grafik */
  --segnale-testo:#3269cc; /* derselbe Akzent als Schrift auf Weiß: 5,2:1 */

  /* Fläche und Schrift */
  --bianco:     #ffffff;
  --carta:      #f5f7fa;
  --linea:      #dde3ec;
  --linea-scura:#28407f;
  --inchiostro: #0f1725;
  --grigio:     #5b6675;
  --grigio-blu: #a8b6d4;

  /* Typografie */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --testo:   "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythmus: Grundmaß 8px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:176px;

  --breite: 1280px;
  --rand: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bianco);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.65;
  font-feature-settings:"kern","liga","cv11";
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; }

/* Korn und Vignette gehören zum dunklen Bild, nicht auf weißes Papier. */
.grana,.vignetta{ display:none; }

/* ---------- Typografie ------------------------------------------------- */
h1,h2,h3,.occhiello,.cifra{ font-family:var(--display); }
h1,h2,h3{ font-weight:800; letter-spacing:-.022em; line-height:1.04; text-wrap:balance; margin:0; }
h1{ font-size:clamp(2.5rem,6.6vw,5.2rem); text-transform:uppercase; }
h2{ font-size:clamp(1.9rem,4.2vw,3.2rem); text-transform:uppercase; color:var(--blu); }
h3{ font-size:clamp(1.12rem,1.7vw,1.36rem); letter-spacing:-.01em; color:var(--blu); }
p{ margin:0; max-width:64ch; }
.guida{ color:var(--grigio); font-size:clamp(1.02rem,1.3vw,1.16rem); }

.occhiello{
  font-size:.74rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--segnale-testo); display:flex; align-items:center; gap:var(--s2); margin:0 0 var(--s3);
}
.occhiello::before{ content:""; width:clamp(24px,4vw,56px); height:2px; background:currentColor; }

/* ---------- Layout ------------------------------------------------------ */
.wrap{ width:100%; max-width:var(--breite); margin-inline:auto; padding-inline:var(--rand); }
section{ position:relative; padding-block:clamp(72px,10vw,var(--s9)); }
.sfondo-carta{ background:var(--carta); }
.sfondo-blu{ background:var(--blu-scuro); color:#eef2f9; }
.sfondo-blu h2{ color:#fff; }
.sfondo-blu h3{ color:#fff; }
.sfondo-blu .guida{ color:var(--grigio-blu); }
.sfondo-blu .occhiello, .intro .occhiello{ color:#8fb6ff; }
.riga-sopra{ border-top:1px solid var(--linea); }
.sfondo-blu.riga-sopra{ border-top-color:var(--linea-scura); }

/* ---------- Schaltflächen ---------------------------------------------- */
.bottone{
  --bg:var(--blu); --fg:#fff;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px; border-radius:3px; border:1px solid var(--bg);
  background:var(--bg); color:var(--fg);
  font-family:var(--display); font-weight:600; font-size:.82rem;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  cursor:pointer; position:relative;
  transition:transform .4s var(--ease), background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bottone .freccia{ transition:transform .45s var(--ease); }
.bottone:hover{ background:var(--blu-medio); border-color:var(--blu-medio); transform:translateY(-2px); box-shadow:var(--kante), var(--e3); }
.bottone:hover .freccia{ transform:translateX(5px); }
.bottone--linea{ --bg:transparent; --fg:var(--blu); border-color:var(--linea); }
.bottone--linea:hover{ background:var(--blu-chiaro); border-color:var(--blu); color:var(--blu); }
.sfondo-blu .bottone--linea, .hero .bottone--linea{ --fg:#fff; border-color:rgba(255,255,255,.38); }
.sfondo-blu .bottone--linea:hover, .hero .bottone--linea:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--segnale); outline-offset:3px; border-radius:2px;
}

/* ---------- Kopfzeile --------------------------------------------------- */
.testa{
  position:fixed; inset:0 0 auto; z-index:50; color:#fff;
  border-bottom:1px solid transparent;
  transition:background .45s ease, backdrop-filter .45s ease, border-color .45s ease, color .45s ease;
}
.testa.attaccata{
  background:rgba(255,255,255,.95); backdrop-filter:blur(14px);
  border-bottom-color:var(--linea); color:var(--inchiostro);
}
.testa .wrap{ display:flex; align-items:center; gap:var(--s4); height:78px; }
.marchio{ display:flex; align-items:center; gap:12px; text-decoration:none; margin-right:auto; }
.marchio img{ height:36px; width:auto; }




.navi{ display:flex; align-items:center; gap:var(--s4); }
.navi a{
  font-size:.82rem; font-weight:500; letter-spacing:.06em; text-decoration:none;
  position:relative; padding-block:6px; opacity:.85; transition:opacity .3s ease;
}
.navi a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--segnale); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.navi a:hover{ opacity:1; }
.navi a:hover::after{ transform:scaleX(1); transform-origin:left; }


.testa:not(.attaccata) 


.lingue{ display:flex; gap:2px; align-items:center; }
.lingue button{
  background:none; border:0; cursor:pointer; padding:6px 8px; color:inherit;
  font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.12em;
  opacity:.6; transition:opacity .3s ease, color .3s ease;
}
.lingue button[aria-current="true"]{ opacity:1; color:var(--segnale); }
.testa:not(.attaccata) .lingue button[aria-current="true"]{ color:#fff; }
.lingue button:hover{ opacity:1; }
.lingue .sep{ opacity:.3; }

.menu-tasto{ display:none; background:none; border:0; color:inherit; cursor:pointer; padding:8px; }

/* ---------- Fortschrittslinie (das Leitmotiv) --------------------------- */
.filo{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--segnale); z-index:55; }

/* ---------- Hero -------------------------------------------------------- */
.hero{
  min-height:100svh; display:flex; align-items:flex-end; color:#fff;
  padding-block:0 clamp(48px,8vw,110px); overflow:hidden; isolation:isolate;
}
.hero-sfondo{ position:absolute; inset:0; z-index:-2; background:var(--blu-scuro); }
.hero-sfondo::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(100% 70% at 82% 18%, rgba(59,123,224,.38), transparent 60%),
    radial-gradient(90% 80% at 8% 92%, rgba(9,21,58,.92), transparent 62%),
    linear-gradient(160deg,#173a86 0%,#0f2456 48%,#09153a 100%);
}
.hero-foto{ position:absolute; inset:0; z-index:-1; display:block; }
.hero-foto img{
  width:100%; height:100%; object-fit:cover;
  opacity:.5; filter:grayscale(.2) contrast(1.05) brightness(.85);
  animation:kenburns 26s var(--ease) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.06);} to{ transform:scale(1.15) translate3d(-1.5%,-1.5%,0);} }
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(9,21,58,.62) 0%, rgba(9,21,58,.18) 34%, rgba(9,21,58,.94) 100%);
}
.hero .occhiello{ color:#fff; }
.hero .guida{ color:#dbe4f4; max-width:56ch; margin-top:var(--s4); }
.hero-testo{ position:relative; max-width:min(100%,920px); }
.hero h1 .riga{ display:block; overflow:hidden; }
.hero h1 .riga > span{ display:block; transform:translateY(105%); animation:sale 1.1s var(--ease) forwards; }
.hero h1 .riga:nth-child(2) > span{ animation-delay:.12s; }
.hero h1 .riga:nth-child(3) > span{ animation-delay:.24s; }
.hero h1 em{ font-style:normal; color:#8fb6ff; }
@keyframes sale{ to{ transform:translateY(0); } }
.hero .azioni{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }
.hero .entra{ opacity:0; animation:entra 1s var(--ease) .5s forwards; }
.hero .entra.b{ animation-delay:.68s; }
@keyframes entra{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.scorri{
  position:absolute; right:var(--rand); bottom:clamp(48px,8vw,110px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:#c6d4ee;
  writing-mode:vertical-rl;
}
.scorri i{ display:block; width:2px; height:64px; background:linear-gradient(#8fb6ff,transparent); }

/* ---------- Zahlenband -------------------------------------------------- */
.fatti{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.fatto{ padding:var(--s5) var(--s3); border-left:1px solid var(--linea); }
.fatto:first-child{ border-left:0; padding-left:0; }
.cifra{
  font-size:clamp(2.4rem,5vw,3.6rem); font-weight:800; line-height:1;
  letter-spacing:-.03em; color:var(--blu); display:flex; align-items:baseline; gap:.06em;
}
.cifra .unita{ font-size:.42em; color:var(--segnale-testo); }
.fatto p{ margin-top:12px; font-size:.85rem; color:var(--grigio); max-width:22ch; }

/* ---------- Servizi ----------------------------------------------------- */
.intestazione{ display:grid; gap:var(--s4); margin-bottom:clamp(48px,6vw,var(--s7)); }
@media(min-width:900px){ .intestazione{ grid-template-columns:1.05fr .95fr; align-items:end; } }
.servizi{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media(min-width:760px){ .servizi{ grid-template-columns:repeat(2,1fr); } }
.servizio{
  background:var(--bianco); padding:clamp(28px,3.4vw,var(--s6));
  position:relative; overflow:hidden; transition:background .4s ease;
}
.servizio::before{
  content:""; position:absolute; left:0; top:0; width:3px; height:100%;
  background:var(--segnale); transform:scaleY(0); transform-origin:bottom;
  transition:transform .6s var(--ease);
}
.servizio:hover{ background:var(--carta); }
.servizio:hover::before{ transform:scaleY(1); transform-origin:top; }
.servizio .num{
  font-family:var(--display); font-size:.72rem; letter-spacing:.2em; color:var(--segnale-testo);
  display:block; margin-bottom:var(--s3);
}
.servizio h3{ margin-bottom:var(--s2); }
.servizio p{ color:var(--grigio); font-size:.96rem; }
.servizio ul{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.servizio li{
  font-size:.72rem; letter-spacing:.06em; color:var(--blu);
  background:var(--blu-chiaro); border-radius:999px; padding:5px 13px;
}

/* ---------- La rotta (Karte) -------------------------------------------- */
.rotta{ display:grid; gap:clamp(40px,5vw,var(--s7)); align-items:center; }
@media(min-width:960px){ .rotta{ grid-template-columns:.85fr 1.15fr; } }
.mappa{ position:relative; }



@keyframes traccia{ to{ stroke-dashoffset:0; } }








.pulsa{ transform-origin:center; animation:pulsa 2.6s ease-in-out infinite; }
@keyframes pulsa{ 0%,100%{ opacity:.5; r:9; } 50%{ opacity:0; r:22; } }

/* ---------- Storia (Zeitleiste) ----------------------------------------- */
.storia{ position:relative; padding-left:clamp(20px,4vw,var(--s6)); }
.storia::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--linea); }
.storia::after{
  content:""; position:absolute; left:0; top:6px; width:2px;
  height:var(--avanzamento,0%); background:var(--segnale); transition:height .2s linear;
}
.tappa{ position:relative; padding-block:clamp(20px,2.6vw,var(--s4)); display:grid; gap:6px; }
@media(min-width:760px){ .tappa{ grid-template-columns:150px 1fr; gap:var(--s5); align-items:baseline; } }
.tappa::before{
  content:""; position:absolute; left:calc(clamp(20px,4vw,var(--s6)) * -1);
  top:calc(clamp(20px,2.6vw,var(--s4)) + 12px);
  width:11px; height:11px; border-radius:50%; background:var(--bianco);
  border:2px solid var(--segnale); transform:translateX(-4.5px);
}
.tappa .anno{
  font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--blu); letter-spacing:-.02em; line-height:1;
}
.tappa p{ color:var(--grigio); }

/* ---------- Persone ----------------------------------------------------- */
.persone{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media(min-width:820px){ .persone{ grid-template-columns:repeat(3,1fr); } }
.persona{ background:var(--bianco); padding:clamp(28px,3vw,var(--s5)); }
.persona .ruolo{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--segnale-testo); }
.persona h3{ margin:12px 0 var(--s3); }
.persona a{
  display:block; font-size:.94rem; color:var(--grigio); text-decoration:none;
  padding-block:5px; transition:color .3s ease;
}
.persona a:hover{ color:var(--blu); }

/* ---------- Fiducia ----------------------------------------------------- */
.fiducia{ display:grid; gap:var(--s5); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.prova{ border-top:3px solid var(--segnale); padding-top:var(--s3); }
.prova strong{ font-family:var(--display); font-size:1.02rem; color:var(--blu); display:block; margin-bottom:8px; }
.prova span{ color:var(--grigio); font-size:.9rem; }

/* ---------- Preventivo -------------------------------------------------- */
.invito{ overflow:hidden; }
.invito .testo{ max-width:22ch; }
.invito .azioni{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); }

/* ---------- Kontakt / Fuß ----------------------------------------------- */
.contatti{ display:grid; gap:var(--s5); }
@media(min-width:820px){ .contatti{ grid-template-columns:repeat(3,1fr); } }
.blocco h3{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--segnale-testo); margin-bottom:var(--s3); }
.blocco p, .blocco a{ color:var(--grigio); text-decoration:none; display:block; padding-block:3px; }
.blocco a:hover{ color:var(--blu); }

.piede{ background:var(--blu-scuro); color:var(--grigio-blu); padding-block:var(--s5); font-size:.82rem; }
.piede .riga{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; justify-content:space-between; }
.piede a{ text-decoration:none; }
.piede a:hover{ color:#fff; }
.credito{ opacity:.75; }

/* ---------- Reveal beim Scrollen ---------------------------------------- */
.rivela{ opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rivela.visibile{ opacity:1; transform:none; }
.rivela[data-ritardo="1"]{ transition-delay:.1s; }
.rivela[data-ritardo="2"]{ transition-delay:.2s; }
.rivela[data-ritardo="3"]{ transition-delay:.3s; }

/* ---------- Mobil -------------------------------------------------------- */
@media(max-width:900px){
  .menu-tasto{ display:block; order:3; }
  .navi{
    position:fixed; inset:78px 0 auto; flex-direction:column; align-items:flex-start;
    gap:var(--s3); padding:var(--s5) var(--rand) var(--s6);
    background:#fff; color:var(--inchiostro);
    border-bottom:1px solid var(--linea);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .35s ease, transform .35s var(--ease);
  }
  .navi.aperta{ opacity:1; transform:none; pointer-events:auto; }
  .navi a{ font-size:1.25rem; font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--blu); opacity:1; }
  
  .testa:not(.attaccata) 
  .scorri{ display:none; }
  .fatto{ border-left:0; border-top:1px solid var(--linea); padding-inline:0; }
  .fatto:first-child{ border-top:0; }
}

/* ---------- Reduzierte Bewegung ----------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .hero h1 .riga > span{ transform:none; }
  .hero .entra{ opacity:1; }
  .rivela{ opacity:1; transform:none; }
  
  
}

/* =========================================================================
   Unterseiten
   ========================================================================= */

/* ---------- Seitenkopf --------------------------------------------------- */
.intro{
  background:var(--blu-scuro); color:#fff; position:relative; overflow:hidden;
  padding-block:clamp(140px,17vw,210px) clamp(56px,7vw,96px);
}
.intro::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(90% 80% at 88% 10%, rgba(59,123,224,.32), transparent 60%);
}
.intro .wrap{ position:relative; z-index:1; }
.intro h1{ font-size:clamp(2.1rem,5.2vw,4.1rem); }
.intro .occhiello{ color:#8fb6ff; }
.intro .guida{ color:#dbe4f4; margin-top:var(--s4); }

/* ---------- Bilderraster -------------------------------------------------- */
.griglia-foto{ display:grid; gap:2px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.griglia-foto figure{ margin:0; aspect-ratio:4/3; position:relative; overflow:hidden; background:var(--blu-chiaro); }
.griglia-foto img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.griglia-foto figure:hover img{ transform:scale(1.05); }
.griglia-foto figcaption{
  position:absolute; inset:auto 0 0 0; padding:14px 18px;
  font-size:.78rem; letter-spacing:.08em; color:#fff;
  background:linear-gradient(transparent,rgba(10,22,56,.85));
}
/* Fehlt ein Bild, bleibt ein ruhiges Feld mit Beschriftung — kein Bruch. */
.posto{ display:flex; align-items:center; justify-content:center; }
.posto span{
  font-family:var(--display); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--blu); opacity:.55;
}
.nota-vuoto{ margin-top:var(--s4); color:var(--grigio); font-size:.9rem; }

/* ---------- Angebotsformular ---------------------------------------------- */
.modulo{ max-width:820px; }
.barra{ height:3px; background:var(--linea); margin-bottom:var(--s3); }
.barra i{ display:block; height:100%; width:33%; background:var(--segnale); transition:width .5s var(--ease); }
.stato{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grigio); margin-bottom:var(--s5); }
.passo h2{ font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:var(--s5); }
.campo{ margin-bottom:var(--s5); }
.campo > label, .campo > .etichetta{
  display:block; font-weight:600; font-size:.95rem; color:var(--blu); margin-bottom:12px;
}
.campo input, .campo textarea{
  width:100%; font:inherit; color:var(--inchiostro); background:var(--bianco);
  border:1px solid var(--linea); border-radius:3px; padding:13px 15px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.campo textarea{ min-height:110px; resize:vertical; }
.campo input:focus, .campo textarea:focus{
  outline:none; border-color:var(--segnale); box-shadow:0 0 0 3px rgba(59,123,224,.18);
}
.campo input.errore, .campo textarea.errore{ border-color:#b03024; }
.coppia{ display:grid; gap:var(--s3); }
@media(min-width:640px){ .coppia{ grid-template-columns:1fr 1fr; } }
.scelte{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.scelte button{
  font:inherit; text-align:left; cursor:pointer; padding:14px 16px;
  background:var(--bianco); border:1px solid var(--linea); border-radius:3px;
  color:var(--inchiostro); transition:border-color .25s ease, background .25s ease, color .25s ease;
}
.scelte button:hover{ border-color:var(--segnale); }
.scelte button[aria-pressed="true"]{ background:var(--blu); border-color:var(--blu); color:#fff; }
.azioni-modulo{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6); }
.nota-modulo{ margin-top:var(--s4); font-size:.84rem; color:var(--grigio); }

/* ---------- Blöcke auf Unterseiten ---------------------------------------- */
.blocchi{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media(min-width:820px){ .blocchi{ grid-template-columns:repeat(3,1fr); } }
.blocchi article{ background:var(--bianco); padding:clamp(28px,3vw,var(--s5)); }
.blocchi h3{ margin-bottom:var(--s2); }
.blocchi p{ color:var(--grigio); font-size:.95rem; }


/* ---------- Film aus dem Betrieb ----------------------------------------- */
.filmato{ display:grid; gap:clamp(36px,5vw,var(--s7)); align-items:center; }
@media(min-width:900px){ .filmato{ grid-template-columns:1fr .68fr; } }
.telaio{
  position:relative; margin:0; border-radius:6px; overflow:hidden;
  aspect-ratio:9/16; max-height:78vh; background:var(--blu-scuro);
  box-shadow:var(--kante), var(--e3);
}
.telaio video{ width:100%; height:100%; object-fit:cover; display:block; }
.telaio::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.suono{
  position:absolute; right:14px; bottom:14px; z-index:2;
  border:1px solid rgba(255,255,255,.4); background:rgba(9,21,58,.55);
  color:#fff; border-radius:999px; padding:9px 16px; cursor:pointer;
  font-family:var(--display); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(6px); transition:background .3s ease;
}
.suono:hover{ background:rgba(9,21,58,.85); }

/* =========================================================================
   "La rotta" — begehbare Seite: feste Bildbühne, Text läuft darüber
   ========================================================================= */
.mondo{ position:relative; padding:0; background:var(--blu-scuro); color:#fff; }
.scene{ position:sticky; top:0; height:100svh; overflow:hidden; }
.scena{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease); }
.scena.viva{ opacity:1; }
.scena figure{ margin:0; height:100%; }
.scena img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.scena.viva img{ transform:scale(1); transition:transform 7s linear; }
.scene::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(9,21,58,.94) 0%, rgba(9,21,58,.72) 42%, rgba(9,21,58,.25) 100%);
}
@media(max-width:900px){
  .scene::after{ background:linear-gradient(180deg, rgba(9,21,58,.72) 0%, rgba(9,21,58,.88) 55%, rgba(9,21,58,.95) 100%); }
}
.stazioni{ position:relative; margin-top:-100svh; }
.stazione{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  max-width:34rem; padding-block:var(--s7);
  opacity:.25; transform:translateY(10px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.stazione.viva{ opacity:1; transform:none; }
.stazione h2{ color:#fff; margin-bottom:var(--s3); }
.stazione .occhiello{ color:#8fb6ff; }
.stazione .guida{ color:#d7e0f2; }
/* Der Faden am linken Rand füllt sich Station für Station. */
.stazioni::before{
  content:""; position:absolute; left:calc(var(--rand) * -0.4); top:0; bottom:0;
  width:2px; background:rgba(255,255,255,.16);
}
.stazioni::after{
  content:""; position:absolute; left:calc(var(--rand) * -0.4); top:0;
  width:2px; height:calc(var(--tappa,0) * 100%); background:var(--segnale);
  transition:height 1s var(--ease);
}
.mondo-fine{
  position:relative; text-align:center; color:var(--grigio-blu);
  font-family:var(--display); letter-spacing:.14em; text-transform:uppercase;
  font-size:.78rem; padding-block:var(--s7);
}

/* ---------- Langtext (Rechtsseite) --------------------------------------- */
.testo-lungo{ max-width:70ch; }
.testo-lungo h2{ font-size:clamp(1.1rem,1.9vw,1.4rem); margin-top:var(--s6); margin-bottom:var(--s2); }
.testo-lungo h2:first-child{ margin-top:0; }
.testo-lungo p{ color:var(--grigio); }
.testo-lungo a{ color:var(--blu); }

/* Bilder im Raster: figure/picture sauber füllen */
.griglia-foto figure{ display:block; }
.griglia-foto picture{ display:block; height:100%; }

@media(prefers-reduced-motion:reduce){
  .scena.viva img{ transition:none; transform:none; }
  .stazione{ opacity:1; transform:none; }
}

/* ---------- Sprung zum Inhalt (nur mit Tastatur sichtbar) ---------------- */
.salta{
  position:fixed; top:10px; left:10px; z-index:70;
  transform:translateY(-160%); transition:transform .25s var(--ease);
  background:var(--blu); color:#fff; text-decoration:none;
  padding:12px 20px; border-radius:3px;
  font-family:var(--display); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
}
.salta:focus{ transform:none; }

/* =========================================================================
   Tiefe: Parallaxbänder und geschichtete Bilder
   ========================================================================= */

/* Ein Bildband über die volle Breite. Das Bild ist höher als der Rahmen und
   wandert langsamer als die Seite — daraus entsteht die Tiefe. */
.fascia{
  position:relative; overflow:clip; isolation:isolate;
  height:clamp(320px,52vh,620px); background:var(--blu-scuro);
  display:grid; place-items:center; padding:0;
}
.fascia .sfondo{ position:absolute; inset:-14% 0; z-index:0; }
.fascia .sfondo figure{ margin:0; height:100%; }
.fascia .sfondo picture{ display:block; height:100%; }
.fascia .sfondo img{ width:100%; height:100%; object-fit:cover; }
.fascia::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(9,21,58,.70), rgba(9,21,58,.46) 45%, rgba(9,21,58,.78));
}
.fascia .frase{
  position:relative; z-index:2; margin:0; text-align:center; color:#fff;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(1.5rem,3.6vw,3rem); max-width:18ch;
  padding-inline:var(--rand);
}
.fascia .frase span{ color:#8fb6ff; }

/* Hero: Bild wandert langsamer als der Text darüber.
   Kein dauerhaftes will-change — parallasse.js setzt es, solange das Element
   im Bild ist, und nimmt es danach wieder weg. Dauerhaft gesetzt hält der
   Browser für jedes Element eine eigene Ebene im Speicher, auch im Stillstand. */

/* Bildkacheln: das Bild ist etwas größer als die Kachel und verschiebt sich */
.griglia-foto figure{ overflow:clip; }
.griglia-foto picture{ position:relative; top:-6%; height:112%; }

/* Der Film bekommt einen Lichthof */
#filmato::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 78% 50%, rgba(59,123,224,.22), transparent 70%);
}

/* Begehbare Seite: die Szene atmet mit */
.scena.viva img{ transform:scale(1.04); transition:transform 9s linear; }

@media(prefers-reduced-motion:reduce){
  .fascia .sfondo{ inset:0; }
  .griglia-foto picture{ top:0; height:100%; }
  .hero-testo{ transform:none !important; opacity:1 !important; }
}

/* =========================================================================
   Gezeichnete Motive (erzeugt, nicht fotografiert — siehe /note-legali/)
   ========================================================================= */

/* Kartenbild hinter dem Streckendiagramm: nur Atmosphäre. Die Aussage der
   Sektion trägt das SVG davor, nicht die gezeichnete Küstenlinie. */
.mappa{ isolation:isolate; }



/* Linienraster auf dunklen Flächen: sehr leise, nur Materialität. */
.intro::before, .invito::before, .sfondo-blu.riga-sopra::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  background-repeat:repeat; background-size:1400px auto;
  background-image:url("../grafica/trama-linee-1400.jpg");
  background-image:image-set(
    url("../grafica/trama-linee-1400.avif") type("image/avif"),
    url("../grafica/trama-linee-1400.webp") type("image/webp"));
  mix-blend-mode:screen;
}
.intro .wrap, .invito .wrap, .sfondo-blu .wrap{ position:relative; z-index:1; }
.fascia::before{ content:none; }

/* Herkunftszeile unter dem Kartenbild */
.nota-fonte{
  margin-top:var(--s3); font-size:.72rem; letter-spacing:.04em;
  color:var(--grigio-blu); max-width:46ch;
}

/* =========================================================================
   Überarbeitung: Kopfzeile, Tippflächen, Schriftgrößen, enge Bildschirme
   Diese Regeln stehen bewusst am Ende und haben damit das letzte Wort.
   ========================================================================= */

/* ---------- Bildmarke: zwei Fassungen statt Filter ----------------------- */


              /* der alte Trick entfällt */




@media(max-width:900px){
  .navi.aperta ~ .marchio .segno .colorato{ opacity:1; }
}

/* ---------- Kopfzeile: nichts darf umbrechen ---------------------------- */
.testa .wrap{ height:72px; gap:clamp(14px,2.2vw,32px); }


.navi a{ white-space:nowrap; }


/* Ab hier wird es eng: erst die Unterzeile, dann die ganze Leiste ins Menü. */
@media(max-width:1400px){  }
@media(max-width:1180px){
  .menu-tasto{ display:block; order:3; }
  .navi{
    position:fixed; inset:72px 0 auto; flex-direction:column; align-items:stretch;
    gap:4px; padding:var(--s4) var(--rand) var(--s5);
    background:#fff; color:var(--inchiostro);
    border-bottom:1px solid var(--linea);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s ease, transform .3s var(--ease);
    max-height:calc(100svh - 72px); overflow:auto;
  }
  .navi.aperta{ opacity:1; transform:none; pointer-events:auto; }
  .navi a{
    font-size:1.15rem; font-family:var(--display); font-weight:700; text-transform:uppercase;
    color:var(--blu); opacity:1; padding-block:14px; border-bottom:1px solid var(--linea);
  }
  .navi a::after{ display:none; }
  .navi a:last-of-type{ border-bottom:0; }
  
  .testa:not(.attaccata) 
  .navi{ inset-inline:0; }
}

/* ---------- Tippflächen: nirgends unter 44 Pixel ------------------------- */
.lingue button{ min-width:44px; min-height:44px; font-size:.78rem; }
.menu-tasto{ min-width:44px; min-height:44px; display:grid; place-items:center; }
.persona a, .blocco a, .blocco p{ padding-block:10px; min-height:44px; display:flex; align-items:center; }
.piede a{ display:inline-block; padding-block:10px; }
.suono{ min-height:44px; padding-inline:20px; }
@media(min-width:1181px){ .navi a{ padding-block:12px; } }

/* ---------- Schrift: nichts unter 12 Pixel ------------------------------- */
.occhiello{ font-size:.8rem; }
.servizio li{ font-size:.78rem; padding:6px 14px; }
.persona .ruolo, .blocco h3, .servizio .num{ font-size:.78rem; }
.scorri{ font-size:.7rem; }
.nota-fonte{ font-size:.78rem; }
.piede{ font-size:.86rem; }

/* ---------- Enge Bildschirme -------------------------------------------- */
@media(max-width:760px){
  .fatti{ grid-template-columns:1fr 1fr; }
  .fatto{ border-top:0; border-left:1px solid var(--linea); padding:var(--s4) var(--s3); }
  .fatto:nth-child(odd){ border-left:0; padding-left:0; }
  .fatto p{ max-width:none; }
  .cifra{ font-size:clamp(2rem,9vw,2.8rem); }
  .hero{ padding-bottom:clamp(40px,10vw,72px); }
  .hero .azioni .bottone{ width:100%; justify-content:center; }
  .intro{ padding-block:clamp(112px,26vw,150px) clamp(40px,10vw,64px); }
  .stazione{ min-height:88svh; padding-block:var(--s6); }
  .telaio{ max-height:60svh; margin-inline:auto; width:min(100%,340px); }
  .fascia{ height:clamp(260px,44vh,360px); }
  .fascia .frase{ font-size:clamp(1.3rem,6.4vw,1.9rem); }
  .campo .coppia{ grid-template-columns:1fr; }
  .scelte{ grid-template-columns:1fr; }
  .azioni-modulo .bottone{ flex:1 1 100%; justify-content:center; }
  .storia{ padding-left:22px; }
  .tappa::before{ left:-22px; }
}
@media(min-width:761px) and (max-width:1000px){
  .griglia-foto{ grid-template-columns:1fr 1fr; }
}

/* ---------- Überläufe sauber abschneiden -------------------------------- */
.scena, .telaio, .hero, .mappa{ overflow:clip; }
.scene{ overflow:clip; }

/* Rasterspalten dürfen nicht am Eigenmaß der Bilder wachsen.
   "1fr" heißt minmax(auto,1fr) — und auto ist bei einem Bild seine echte Breite. */
.griglia-foto{ grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); }
@media(min-width:761px) and (max-width:1000px){
  .griglia-foto{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.griglia-foto > figure,
.servizi > *, .persone > *, .blocchi > *, .rotta > *, .filmato > *, .fatti > *,
.contatti > *, .intestazione > *, .coppia > *{ min-width:0; }



/* ---------- Sehr schmale Geräte: Kopfzeile entlasten --------------------- */
@media(max-width:560px){
  .testa .wrap{ gap:8px; padding-inline:16px; }
  
  
  .lingue{ gap:0; }
  .lingue .sep{ display:none; }
  .lingue button{ min-width:38px; padding-inline:4px; }
  .menu-tasto{ margin-right:-8px; }
}
.marchio{ min-height:44px; align-items:center; }

/* Der Menüknopf gehört nur auf schmale Bildschirme. */
.menu-tasto{ display:none; }
@media(max-width:1180px){ .menu-tasto{ display:grid; place-items:center; } }
/* Die Unterzeile darf ausgeschrieben werden, solange Platz ist. */


/* =========================================================================
   "La rotta": mitlaufende Karte
   ========================================================================= */
.mappa-viva{
  position:absolute; z-index:3; right:clamp(16px,3vw,48px); bottom:clamp(16px,4vh,56px);
  width:clamp(104px,11vw,150px);
  padding:14px 14px 10px; border-radius:6px;
  background:rgba(6,14,36,.52); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--kante), var(--e3);
}
.mappa-viva svg{ width:100%; height:auto; display:block; overflow:visible; }
.mappa-viva .scia{
  fill:none; stroke:rgba(255,255,255,.22); stroke-width:14; stroke-linecap:round;
}
.mappa-viva .tracciato{
  fill:none; stroke:#8fb6ff; stroke-width:16; stroke-linecap:round;
  stroke-dasharray:var(--len,1000); stroke-dashoffset:var(--len,1000);
  filter:drop-shadow(0 0 5px rgba(143,182,255,.7));
}
.mappa-viva .punto{
  fill:#0b1b45; stroke:rgba(255,255,255,.45); stroke-width:9;
  transition:fill .5s var(--ease), stroke .5s var(--ease), r .5s var(--ease);
}
.mappa-viva .punto.raggiunto{ fill:#8fb6ff; stroke:#8fb6ff; }
.mappa-viva .punto.qui{ r:32; stroke:#fff; }
.mappa-viva .viaggiatore{
  fill:#fff; filter:drop-shadow(0 0 8px rgba(143,182,255,.95));
}
.mappa-viva .etichetta{
  margin:10px 0 0; font-family:var(--display); font-weight:600;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:#c9d8f5; text-align:center; min-height:1.2em;
}

/* Fortschrittsbalken der Route unter der Karte */
.mappa-viva::after{
  content:""; position:absolute; left:14px; right:14px; bottom:6px; height:2px;
  background:linear-gradient(90deg,#8fb6ff calc(var(--avanzamento,0) * 100%),
                             rgba(255,255,255,.16) 0);
  border-radius:2px;
}

@media(max-width:900px){
  .mappa-viva{
    right:12px; top:calc(72px + 12px); bottom:auto;
    width:96px; padding:9px 9px 8px;
  }
  .mappa-viva .etichetta{ display:none; }
  .mappa-viva::after{ left:9px; right:9px; bottom:4px; }
}
@media(max-width:380px){ .mappa-viva{ width:78px; } }

@media(prefers-reduced-motion:reduce){
  .mappa-viva .tracciato{ stroke-dashoffset:0 !important; }
}

/* Die Fotos der Route dürfen sichtbar sein — der Verlauf hält nur den Text
   lesbar, er versteckt das Bild nicht. */
.scene::after{
  background:linear-gradient(90deg, rgba(9,21,58,.93) 0%, rgba(9,21,58,.66) 36%,
                             rgba(9,21,58,.22) 72%, rgba(9,21,58,.08) 100%);
}
@media(max-width:900px){
  .scene::after{
    background:linear-gradient(180deg, rgba(9,21,58,.58) 0%, rgba(9,21,58,.80) 48%,
                               rgba(9,21,58,.92) 100%);
  }
}
/* Die Szene wandert über die ganze Strecke ein Stück mit. */
.scena figure{ transform:translate3d(0, calc(var(--avanzamento,0) * -2.5%), 0); }

/* Auf dem Telefon gehört die Karte nach unten — oben steht die Überschrift. */
@media(max-width:900px){
  .mappa-viva{
    top:auto; bottom:14px; right:12px; width:84px; padding:8px 8px 7px;
    background:rgba(6,14,36,.62);
  }
}
@media(max-width:380px){ .mappa-viva{ width:72px; bottom:12px; } }
.mappa-viva .etichetta{ font-size:.78rem; letter-spacing:.08em; }

/* =========================================================================
   Kopfbild als Folge: drei Aufnahmen, langsam ineinander
   Hof — Verladung — Festland. Dieselbe Reihenfolge wie die Route.
   ========================================================================= */
.hero-scena{ position:absolute; inset:0; z-index:-1; }
.hero-foto{ position:absolute; inset:0; display:block; }
.hero-foto img{
  width:100%; height:100%; object-fit:cover;
  opacity:.5; filter:grayscale(.2) contrast(1.05) brightness(.85);
  animation:none;                      /* der alte Einzel-Zoom entfällt */
}
/* Bis die Folge startet, liegt nur die erste Aufnahme sichtbar oben. */
.hero-foto:not(:first-child){ opacity:0; }

.hero-scena.in-corso .hero-foto{
  animation:sequenza 21s var(--ease) infinite;
}
.hero-scena.in-corso .hero-foto:nth-child(2){ animation-delay:7s; }
.hero-scena.in-corso .hero-foto:nth-child(3){ animation-delay:14s; }
.hero-scena.in-corso .hero-foto img{
  animation:derivare 21s linear infinite;
}
.hero-scena.in-corso .hero-foto:nth-child(2) img{ animation-delay:7s; }
.hero-scena.in-corso .hero-foto:nth-child(3) img{ animation-delay:14s; }

/* 7 s sichtbar, 2 s Überblendung, dann wartet die Ebene im Hintergrund. */
@keyframes sequenza{
  0%    { opacity:0; }
  4%    { opacity:1; }
  33%   { opacity:1; }
  38%   { opacity:0; }
  100%  { opacity:0; }
}
@keyframes derivare{
  0%   { transform:scale(1.04); }
  40%  { transform:scale(1.11); }
  100% { transform:scale(1.11); }
}

@media(prefers-reduced-motion:reduce){
  .hero-scena.in-corso .hero-foto,
  .hero-scena.in-corso .hero-foto img{ animation:none; }
  .hero-foto:not(:first-child){ opacity:0; }
}

/* =========================================================================
   Fahrzeugwähler
   ========================================================================= */
.schede{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5);
  border-bottom:1px solid var(--linea); padding-bottom:var(--s3);
}
.scheda{
  font:inherit; cursor:pointer; padding:13px 20px; min-height:44px;
  background:var(--bianco); border:1px solid var(--linea); border-radius:3px;
  color:var(--blu); font-family:var(--display); font-weight:600;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.scheda:hover{ border-color:var(--segnale); }
.scheda[aria-selected="true"]{ background:var(--blu); border-color:var(--blu); color:#fff; }
.pannello{ display:grid; gap:clamp(24px,3.5vw,var(--s6)); align-items:center; }
@media(min-width:900px){ .pannello{ grid-template-columns:1.15fr .85fr; } }
.pannello[hidden]{ display:none; }
.pannello > figure{ margin:0; overflow:clip; border-radius:4px; }
.pannello > figure img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.pannello .dettaglio h3{ margin-bottom:var(--s2); }
.pannello .dettaglio p{ color:var(--grigio); }
.pannello .dettaglio ul{
  list-style:none; margin:var(--s3) 0 var(--s5); padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.pannello .dettaglio li{
  font-size:.78rem; letter-spacing:.06em; color:var(--blu);
  background:var(--blu-chiaro); border-radius:999px; padding:6px 14px;
}
@media(max-width:560px){
  .schede{ gap:6px; }
  .scheda{ flex:1 1 100%; text-align:left; }
  .pannello .dettaglio .bottone{ width:100%; justify-content:center; }
}
/* Der gewünschte Fahrzeugtyp im Formular */
.mezzo-scelto{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--s4);
  background:var(--blu-chiaro); border-radius:999px; padding:9px 16px;
  font-size:.84rem; color:var(--blu);
}
.mezzo-scelto b{ font-weight:600; }

/* =========================================================================
   Scrollytelling: Aussage, Fuhrparkraster
   ========================================================================= */

/* ---------- Ganzflächige Aussage ---------------------------------------- */
.dichiarazione{
  position:relative; overflow:clip; background:var(--blu-scuro); color:#fff;
  padding-block:clamp(120px,22vh,240px);
  display:grid; place-items:center;
}
.dichiarazione::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-position:center; background-size:cover; background-repeat:no-repeat;
  opacity:.55;
}
.dichiarazione::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:radial-gradient(70% 70% at 50% 50%, rgba(9,21,58,.55), rgba(9,21,58,.9));
}
.dichiarazione .wrap{ position:relative; z-index:2; }
.dichiarazione[data-sfondo="notte-strada"]::before{
  background-image:url("../grafica/notte-strada-1600.jpg");
  background-image:image-set(url("../grafica/notte-strada-1600.avif") type("image/avif"),
                             url("../grafica/notte-strada-1600.webp") type("image/webp"));
}
.dichiarazione[data-sfondo="porto-schema"]::before{
  background-image:url("../grafica/porto-schema-1600.jpg");
  background-image:image-set(url("../grafica/porto-schema-1600.avif") type("image/avif"),
                             url("../grafica/porto-schema-1600.webp") type("image/webp"));
  opacity:.7;
}
.frase-lunga{
  margin:0 auto; max-width:22ch; text-align:center;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.7rem,5vw,4rem); line-height:1.06; letter-spacing:-.022em;
}
/* Kein blur(): Weichzeichner ist die teuerste Eigenschaft, die man animieren
   kann, und lief hier auf zehn Wörtern gleichzeitig. Deckung plus ein kleiner
   Versatz sieht fast gleich aus und läuft im Compositor. */
.parola{
  display:inline-block; opacity:.12;
  transform:translateY(.22em) scale(.985);
  transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.parola.vista{ opacity:1; transform:none; }

/* ---------- Fuhrparkraster ---------------------------------------------- */
.conta-flotta{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  color:var(--blu); margin-bottom:var(--s3);
  display:flex; align-items:baseline; gap:.4em;
}
.conta-flotta b{ font-size:clamp(2.6rem,6vw,4.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.conta-flotta span{
  font-family:var(--testo); font-weight:500; font-size:.9rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--grigio);
}
.raster{
  display:grid; gap:clamp(6px,1vw,12px);
  grid-template-columns:repeat(auto-fill,minmax(clamp(46px,6vw,74px),1fr));
}
.raster i{ display:block; }
.sagoma{ width:100%; height:auto; display:block; fill:var(--linea); transition:fill .45s var(--ease); }
.raster i.vista .sagoma{ fill:var(--blu); }
.raster i:nth-child(7n) .sagoma,
.raster i:nth-child(11n) .sagoma{ transition-delay:.06s; }
.nota-flotta{ margin-top:var(--s5); }

@media(prefers-reduced-motion:reduce){
  .parola{ opacity:1; transform:none; }
}

/* Die Jahreszahl bleibt stehen, solange ihre Etappe läuft. */
@media(min-width:760px){
  .tappa .anno{ position:sticky; top:calc(72px + var(--s5)); }
}
/* Bilder der Gallery kommen gestaffelt herein. */
.griglia-foto .rivela{ transform:translateY(18px); }

/* =========================================================================
   Große Monitore, sehr kleine Telefone, Querformat
   ========================================================================= */

/* Ab 1600 px wächst der Satzspiegel mit, statt mittig zu versinken. */
@media(min-width:1600px){
  :root{ --breite:clamp(1280px, 84vw, 1760px); --rand:clamp(48px,4vw,96px); }
  body{ font-size:19px; }
  h1{ font-size:clamp(4.4rem,5.2vw,7rem); }
  h2{ font-size:clamp(2.8rem,3.2vw,4.2rem); }
  .testa .wrap{ height:88px; }
  
  .navi a{ font-size:.92rem; }
  .bottone{ font-size:.88rem; padding:17px 30px; }
  .frase-lunga{ font-size:clamp(3rem,4.4vw,5.6rem); }
  .cifra{ font-size:clamp(3.4rem,3.6vw,4.6rem); }
  .navi{ gap:clamp(24px,2vw,44px); }
  .mappa-viva{ width:240px; }
}
@media(min-width:2200px){
  body{ font-size:20px; }
  .hero .guida, .guida{ font-size:1.24rem; }
}

/* Sehr kleine Telefone: die Kopfzeile muss noch hineinpassen. */
@media(max-width:400px){
  .testa .wrap{ gap:6px; padding-inline:12px; }
  
  
  .lingue button{ min-width:32px; padding-inline:2px; font-size:.72rem; }
  .menu-tasto{ min-width:40px; margin-right:-6px; }
  h1{ font-size:clamp(2.1rem,10vw,2.6rem); }
}

/* Telefon im Querformat: bildschirmhohe Abschnitte sind dort eine Zumutung. */
@media(max-height:520px) and (orientation:landscape){
  .hero{ min-height:auto; padding-block:120px 56px; }
  .hero h1{ font-size:clamp(2rem,6vw,3rem); }
  .hero .guida{ margin-top:var(--s3); }
  .hero .azioni{ margin-top:var(--s4); }
  .scene{ height:100svh; }
  .stazione{ min-height:100svh; padding-block:var(--s5); justify-content:center; }
  .intro{ padding-block:104px 48px; }
  .dichiarazione{ padding-block:96px; }
  .telaio{ max-height:none; height:70svh; width:auto; aspect-ratio:9/16; }
  .mappa-viva{ width:76px; bottom:10px; right:10px; }
  section{ padding-block:clamp(48px,9vh,80px); }
}

/* Die Sprachwahl steht auf kleinen Geräten im Menü, nicht in der Leiste. */
@media(max-width:900px){
  .navi .lingue{
    display:flex; gap:6px; margin-top:var(--s4);
    padding-top:var(--s3); border-top:1px solid var(--linea);
  }
  .navi .lingue button{
    flex:1; min-height:52px; font-size:.92rem; color:var(--blu);
    border:1px solid var(--linea); border-radius:3px; opacity:1;
  }
  .navi .lingue button[aria-current="true"]{
    background:var(--blu-chiaro); border-color:var(--blu); color:var(--blu);
  }
  .navi .lingue .sep{ display:none; }
}
@media(max-width:400px){
  
  
}
/* Auf breiten Bildschirmen darf auch der Kopftext breiter werden,
   sonst bricht die dritte Zeile der Überschrift um. */
@media(min-width:1600px){
  .hero-testo{ max-width:min(100%,1400px); }
  .hero .guida{ max-width:52ch; }
}

/* =========================================================================
   Kein grauer Kasten mehr: in jeder Bildfläche liegt ein winziges
   Vorschaubild (24 px breit, rund 400 Byte), hochskaliert und damit weich.
   Sobald das richtige Bild dekodiert ist, deckt es die Vorschau zu.
   ========================================================================= */
.con-anteprima img, .hero-foto img, .scena img, .pannello img, .fascia img{
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* Die alte graue Füllung entfällt — sie war genau der Kasten, den man sah. */
.griglia-foto figure{ background:none; }
.telaio{ background-size:cover; background-position:center; }

/* =========================================================================
   Feinschliff
   ========================================================================= */

/* Anker nicht unter der Kopfzeile verstecken */
:target, [id]{ scroll-margin-top:96px; }

::selection{ background:var(--blu); color:#fff; }
.sfondo-blu ::selection, .hero ::selection, .dichiarazione ::selection{
  background:#8fb6ff; color:var(--blu-scuro);
}

/* Weniger Schusterjungen im Fließtext */
p, .guida, li, figcaption{ text-wrap:pretty; }

/* Zahlen laufen nicht mehr in der Breite (Zähler, Jahre, Telefonnummern) */
.cifra, .conta-flotta b, .tappa .anno, .persona a[href^="tel"]{ font-variant-numeric:tabular-nums; }

/* Bildunterschriften kommen erst beim Hinsehen ganz heran */
.griglia-foto figcaption{
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.griglia-foto figure:hover figcaption,
.griglia-foto figure:focus-within figcaption{ opacity:1; transform:none; }
@media(hover:none){ .griglia-foto figcaption{ opacity:1; transform:none; } }

/* Karten heben sich beim Zeigen leicht an — einmal, nicht bei jedem Element */
.servizio, .persona, .blocchi article{ transition:background .4s ease, transform .5s var(--ease); }
@media(hover:hover){
  .persona:hover, .blocchi article:hover{ transform:translateY(-3px); }
}

/* Schaltflächen: der Lichtstreif läuft einmal durch */
.bottone::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
@media(hover:hover){ .bottone:hover::after{ transform:translateX(120%); } }
.bottone{ overflow:hidden; }

/* Trennlinien der Abschnitte enden nicht hart am Rand */
.riga-sopra{ position:relative; }

/* Der Faden oben bekommt einen leichten Schimmer */
.filo{ box-shadow:0 0 10px rgba(59,123,224,.6); }

/* Ruhigere Schrift in Versalien */
h1, h2, .frase, .frase-lunga, .bottone, .occhiello{ font-kerning:normal; }

/* Fußzeile: mehr Luft, klarere Trennung */
.piede{ padding-block:var(--s6); }
.piede .riga{ gap:var(--s4); }

/* =========================================================================
   Ohne JavaScript ist alles sichtbar.
   Die Anfangszustände der Scroll-Effekte gelten nur, wenn das Skript läuft —
   sonst bleiben Kacheln, Stationen und Szenen leer, bis es geladen ist.
   Ein einziger Befehl im Kopf der Seite setzt die Klasse, noch vor dem CSS.
   ========================================================================= */
.rivela{ opacity:1; transform:none; }
.js .rivela{ opacity:0; transform:translateY(24px); }
.js .rivela.visibile{ opacity:1; transform:none; }
.js .griglia-foto .rivela{ transform:translateY(18px); }
.js .griglia-foto .rivela.visibile{ transform:none; }

.stazione{ opacity:1; }
.js .stazione{ opacity:.25; transform:translateY(10px); }
.js .stazione.viva{ opacity:1; transform:none; }

.scena{ opacity:0; }
.scena:first-child{ opacity:1; }
.js .scena:first-child{ opacity:0; }
.js .scena.viva{ opacity:1; }

.parola{ opacity:1; transform:none; }
.js .parola{ opacity:.12; transform:translateY(.22em) scale(.985); }
.js .parola.vista{ opacity:1; transform:none; }
/* Im Menü hat auch die Angebots-Schaltfläche volle Höhe. */
@media(max-width:1180px){
  
}

/* =========================================================================
   Das echte Logo
   Kopfzeile: kompakte Sperrung. Vollständige Sperrung mit Fußzeile: im Fuß.
   Die Datei steht in --img, damit Hintergrund und Maske dieselbe Silhouette
   benutzen — der Lichtglanz liegt dadurch genau auf dem Logo, nicht im Kasten.
   ========================================================================= */
.marchio{ display:flex; align-items:center; margin-right:auto; text-decoration:none; min-height:44px; }
.logo{
  --img:image-set(url("../marke/logo-compatto-bianco-2x.avif") type("image/avif") 1x,
                  url("../marke/logo-compatto-bianco-3x.avif") type("image/avif") 2x);
  position:relative; display:block; height:38px; width:calc(38px * 4.36);
  background-image:var(--img);
  background-repeat:no-repeat; background-position:left center; background-size:contain;
  transition:filter .3s ease;
}
.testa.attaccata .logo{
  --img:image-set(url("../marke/logo-compatto-colore-2x.avif") type("image/avif") 1x,
                  url("../marke/logo-compatto-colore-3x.avif") type("image/avif") 2x);
}
@supports not (background-image:image-set(url("x.avif") type("image/avif") 1x)){
  .logo{ --img:url("../marke/logo-compatto-bianco-2x.png"); }
  .testa.attaccata .logo{ --img:url("../marke/logo-compatto-colore-2x.png"); }
}
@media(max-width:400px){ .logo{ height:31px; width:calc(31px * 4.36); } }
@media(min-width:1600px){ .logo{ height:46px; width:calc(46px * 4.36); } }

/* Im Fuß die vollständige Sperrung, weiß auf Marineblau. */
.logo-piede{
  display:block; height:64px; width:calc(64px * 3.445); margin-bottom:var(--s4);
  background-repeat:no-repeat; background-position:left center; background-size:contain;
  background-image:image-set(url("../marke/logo-bianco-2x.avif") type("image/avif") 1x,
                             url("../marke/logo-bianco-3x.avif") type("image/avif") 2x);
}
@supports not (background-image:image-set(url("x.avif") type("image/avif") 1x)){
  .logo-piede{ background-image:url("../marke/logo-bianco-2x.png"); }
}
@media(max-width:560px){ .logo-piede{ height:52px; width:calc(52px * 3.445); } }
.piede .riga{ align-items:flex-end; }
.piede .colonna-marchio{ display:flex; flex-direction:column; }

/* =========================================================================
   Karte der Route: echte Küstenlinien (Natural Earth 1:50 Mio.),
   Stationen an ihren tatsächlichen Koordinaten. Erzeugt von mappa.py.
   ========================================================================= */
.mappa svg{
  width:100%; height:auto; display:block; overflow:hidden;
  max-height:min(84vh, 940px);      /* sonst ragt die Karte aus dem Abschnitt */
}
@media(max-width:900px){ .mappa svg{ max-height:min(70vh, 620px); } }
.carta-rotta .coste path{
  fill:rgba(24,52,120,.55); stroke:#8fb6ff; stroke-width:1.4;
  stroke-linejoin:round; opacity:.5;
}
.carta-rotta .scia-rotta{ fill:none; stroke:#fff; stroke-width:11; opacity:.12; }
.carta-rotta .tratto-rotta{
  fill:none; stroke:#8fb6ff; stroke-width:5.5; stroke-linecap:round;
  stroke-dasharray:var(--len,4000); stroke-dashoffset:var(--len,4000);
  filter:drop-shadow(0 0 8px rgba(143,182,255,.55));
}
.visibile .carta-rotta .tratto-rotta{ animation:traccia 3s var(--ease) forwards; }
.carta-rotta .nodo-rotta circle{ fill:var(--blu-scuro); stroke:#fff; stroke-width:4; }
.carta-rotta .nodo-rotta.hub circle{ fill:#8fb6ff; stroke:#fff; }
.carta-rotta .nodo-rotta .alone{
  fill:#8fb6ff; stroke:none; opacity:.28;
  animation:pulsa-carta 3s ease-in-out infinite; transform-origin:center;
}
@keyframes pulsa-carta{ 0%,100%{ opacity:.28; } 50%{ opacity:.05; } }
.carta-rotta .nodi-rotta{ overflow:visible; }
.carta-rotta text{
  font-family:var(--testo); font-size:26px; font-weight:500;
  fill:#eaf1ff; letter-spacing:.02em; paint-order:stroke;
  stroke:rgba(9,21,58,.75); stroke-width:5px; stroke-linejoin:round;
}
.visibile .carta-rotta .nodo-rotta{ opacity:0; animation:entra .8s var(--ease) forwards; }
.visibile .carta-rotta .nodo-rotta:nth-of-type(1){ animation-delay:.4s; }
.visibile .carta-rotta .nodo-rotta:nth-of-type(2){ animation-delay:1s; }
.visibile .carta-rotta .nodo-rotta:nth-of-type(3){ animation-delay:1.9s; }
.visibile .carta-rotta .nodo-rotta:nth-of-type(4){ animation-delay:2.6s; }
@media(prefers-reduced-motion:reduce){
  .carta-rotta .tratto-rotta{ stroke-dashoffset:0 !important; animation:none; }
  .visibile .carta-rotta .nodo-rotta{ opacity:1; animation:none; }
  .carta-rotta .nodo-rotta .alone{ animation:none; }
}

/* =========================================================================
   Höhen: Zuordnung der Bauteile nach dem Schattensystem
   Ebene 1 liegt an · 2 liegt auf · 3 angehoben · 4 schwebt
   ========================================================================= */

/* --- Schaltflächen: 2 · Hover 3 · gedrückt 1 -------------------------- */
.bottone{
  --sh:12 22 58;                      /* eigener Ton aus dem Markenblau */
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease),
             background .3s ease, border-color .3s ease;
}
@media(hover:hover){
  .bottone:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
.bottone:active{ box-shadow:var(--kante), var(--e1); transform:scale(.98); transition-duration:.12s; }
.bottone--linea{ --sh:20 26 41; }
.hero .bottone--linea, .sfondo-blu .bottone--linea, .dichiarazione .bottone--linea{ --sh:0 0 0; }

/* --- Raster aus Karten: der Verbund liegt an, die Zellen tönen nur ----- */
.servizi, .persone, .blocchi{ box-shadow:var(--kante), var(--e1); }
.persona:hover, .blocchi article:hover{ box-shadow:none; }

/* --- Frei stehende Bilder: 2, beim Zeigen 3 --------------------------- */
.griglia-foto figure{
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease);
}
@media(hover:hover){
  .griglia-foto figure:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
/* Bild in einer Karte: keine zweite Höhe, nur die Kante */
.pannello > figure{ box-shadow:var(--kante); }

/* --- Filmrahmen und Kartenkarte auf dunklem Grund --------------------- */
.telaio{ box-shadow:var(--kante), var(--e3); }
.mappa-viva{ box-shadow:var(--kante), var(--e3); }

/* --- Eingabefelder: eingelassen, nicht erhaben ------------------------ */
.campo input, .campo textarea{ box-shadow:var(--incavo); }
.campo input:focus, .campo textarea:focus{
  box-shadow:var(--incavo), 0 0 0 3px rgba(47,107,209,.18);
}

/* --- Auswahlkacheln und Reiter: wie Schaltflächen --------------------- */
.scelte button, .scheda{
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease),
             background .25s ease, border-color .25s ease, color .25s ease;
}
@media(hover:hover){
  .scelte button:hover, .scheda:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
.scelte button:active, .scheda:active{ box-shadow:var(--kante), var(--e1); transform:scale(.98); }
.scelte button[aria-pressed="true"], .scheda[aria-selected="true"]{
  --sh:12 22 58; box-shadow:var(--kante), var(--e1); transform:none;
}

/* --- Kopfzeile: keine Höhe im Ruhezustand, Ebene 2 beim Scrollen ------ */
.testa{ box-shadow:none; transition:background .45s ease, backdrop-filter .45s ease,
        border-color .45s ease, color .45s ease, box-shadow .24s var(--ease); }
.testa.attaccata{ box-shadow:var(--e2); }
.navi.aperta{ box-shadow:var(--e3); }

/* --- Fußzeile und Flächenabschnitte bleiben ohne Höhe ----------------- */
.piede, .fascia, .dichiarazione{ box-shadow:none; }

/* `hidden` schlägt jede Anzeigeart — sonst steht die Zeile auch ohne Fahrzeug da. */
[hidden]{ display:none !important; }

/* Höhe braucht Luft: bei 2 px Abstand fressen sich die Schatten gegenseitig. */
.griglia-foto{ gap:clamp(12px,1.6vw,22px); background:none; }
.griglia-foto figure{ border-radius:3px; }
.griglia-foto figcaption{ border-radius:0 0 3px 3px; }

/* Das Bild muss die Kachel füllen. Vorher hing die Höhe an einer
   Prozentangabe, die bei breiten Aufnahmen nicht aufging — unten blieb
   ein weißer Streifen. Jetzt liegt das Bild absolut in der Kachel. */
.griglia-foto figure{ position:relative; }
.griglia-foto picture{ position:absolute; inset:0; top:0; height:100%; display:block; }
.griglia-foto img{ width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
@media(prefers-reduced-motion:reduce){ .griglia-foto img{ transform:none; } }

/* =========================================================================
   Logo: abgesetzt, leicht plastisch, mit Lichtglanz
   Zwei gestapelte drop-shadow — Kontakt und Streuung, wie bei den Flächen,
   nur eben für ein freigestelltes Motiv. Der Glanz ist auf die Silhouette
   des Logos maskiert und läuft beim Zeigen einmal darüber.
   ========================================================================= */
.logo, .logo-piede{
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / .34))
         drop-shadow(0 7px 14px rgb(0 0 0 / .26));
}
/* Auf weißem Grund gilt der Schattenton der Marke, nicht Schwarz. */
.testa.attaccata .logo{
  filter:drop-shadow(0 1px 1px rgb(var(--sh) / .20))
         drop-shadow(0 6px 13px rgb(var(--sh) / .16));
}

/* Ruhender Lichtverlauf von oben: gibt dem Motiv leichte Wölbung,
   ohne in Emboss zu kippen (heller Schatten nach oben bleibt aus). */
.logo::before, .logo-piede::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgb(255 255 255 / .24) 0%,
                             rgb(255 255 255 / .04) 44%, rgb(0 0 0 / .12) 100%);
  -webkit-mask-image:var(--img); mask-image:var(--img);
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
  mix-blend-mode:soft-light;
}

/* Der Glanz: ein schmaler Streif, der beim Zeigen einmal durchläuft. */
.logo::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(112deg, transparent 43%, rgb(255 255 255 / .42) 50%,
                             transparent 57%);
  -webkit-mask-image:var(--img); mask-image:var(--img);
  -webkit-mask-size:contain;     mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:left center; mask-position:left center;
}
@media(hover:hover){
  .marchio:hover .logo::after{ animation:lucido 1.05s var(--ease); }
  .marchio:hover .logo{
    filter:drop-shadow(0 1px 1px rgb(0 0 0 / .36))
           drop-shadow(0 11px 20px rgb(0 0 0 / .30));
  }
  .testa.attaccata .marchio:hover .logo{
    filter:drop-shadow(0 1px 1px rgb(var(--sh) / .22))
           drop-shadow(0 10px 20px rgb(var(--sh) / .18));
  }
}
.marchio:focus-visible .logo::after{ animation:lucido 1.05s var(--ease); }

@keyframes lucido{
  0%   { opacity:0;  transform:translateX(-45%); }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { opacity:0;  transform:translateX(45%); }
}

/* Das Fußlogo trägt seine eigene Silhouette als Maske. */
.logo-piede{
  --img:image-set(url("../marke/logo-bianco-2x.avif") type("image/avif") 1x,
                  url("../marke/logo-bianco-3x.avif") type("image/avif") 2x);
  position:relative;
}
@supports not (background-image:image-set(url("x.avif") type("image/avif") 1x)){
  .logo-piede{ --img:url("../marke/logo-bianco-2x.png"); }
}
.logo-piede{ background-image:var(--img); }

@media(prefers-reduced-motion:reduce){
  .marchio:hover .logo::after{ animation:none; }
}

/* =========================================================================
   Moderne Schicht: Seitenwechsel, Überschriften, Licht, Korn, Neigung
   ========================================================================= */

/* --- 1. Seitenwechsel: die Seite blendet, statt zu blitzen --------------
   View Transitions über Dokumentgrenzen. Browser ohne Unterstützung
   navigieren wie bisher — es gibt nichts zu ersetzen. */
@view-transition{ navigation: auto; }
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){ animation:.28s var(--ease) both svanisci; }
  ::view-transition-new(root){ animation:.42s var(--ease) both apparire; }
}
@keyframes svanisci{ to{ opacity:0; } }
@keyframes apparire{ from{ opacity:0; transform:translateY(10px); } }
/* Kopfzeile und Logo bleiben beim Wechsel stehen, statt mitzublenden. */
.testa{ view-transition-name:testa; }
.logo{ view-transition-name:logo; }

/* --- 2. Überschriften laufen zeilenweise ein --------------------------- */
.js h2:not(.frase-lunga):not(.testo){
  /* Etwas Luft unten, damit Unterlängen beim Aufziehen nicht abgeschnitten
     werden — negative Werte in inset() sind nicht überall gültig. */
  padding-bottom:.14em; margin-bottom:-.14em;
  clip-path:inset(0 0 100% 0); opacity:0;
  transition:clip-path 1s var(--ease), opacity .7s var(--ease);
}
/* Dieselbe Spezifität wie die Ausgangsregel, sonst gewinnt die. */
.js h2.svelata:not(.frase-lunga):not(.testo){ clip-path:inset(0); opacity:1; }
@media(prefers-reduced-motion:reduce){
  .js h2:not(.frase-lunga):not(.testo){ clip-path:none; opacity:1; transition:none; }
}

/* --- 3. Licht folgt dem Zeiger über dunklen Flächen -------------------- */
.luce-attiva .sfondo-blu, .luce-attiva .dichiarazione,
.luce-attiva .hero, .luce-attiva .intro{ position:relative; }
.luce-attiva .sfondo-blu::after, .luce-attiva .dichiarazione::after,
.luce-attiva .intro::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:calc(var(--luce, 0) * .5); transition:opacity .5s ease;
  background:radial-gradient(340px circle at var(--lx,50%) var(--ly,50%),
             rgba(143,182,255,.16), transparent 68%);
}
.luce-attiva .hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:calc(var(--luce, 0) * .30); transition:opacity .5s ease;
  background:radial-gradient(300px circle at var(--lx,50%) var(--ly,50%),
             rgba(143,182,255,.14), transparent 72%);
}
/* Die Aussage hatte schon ein ::after — dort wird das Licht davorgelegt. */
.luce-attiva .dichiarazione::after{ z-index:1; }

/* --- 4. Feines Korn auf dunklen Flächen: filmische Anmutung ------------ */
.sfondo-blu, .dichiarazione, .hero, .mondo, .intro{ isolation:isolate; }
.grana-scura{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- 5. Bildkacheln neigen sich leicht zum Zeiger ---------------------- */
@media(hover:hover) and (pointer:fine){
  .griglia-foto{ perspective:1200px; }
  .griglia-foto figure{ transform-style:preserve-3d; }
  .griglia-foto figure:hover{
    transform:translateY(-4px) rotateX(1.6deg) rotateY(-1.2deg) scale(1.012);
  }
  .griglia-foto figure:hover img{ transform:scale(1.08); }
  .griglia-foto img{ transition:transform .6s var(--ease); }
}
@media(prefers-reduced-motion:reduce){
  .griglia-foto figure:hover{ transform:none; }
}

/* =========================================================================
   Filmabschnitt: der Rahmen ist so hoch wie der Text daneben
   Vorher gab das Seitenverhältnis 9:16 die Höhe vor — der Film ragte weit
   über den Text hinaus. Jetzt bestimmt die Textspalte die Zeilenhöhe, der
   Film füllt sie und wird dabei beschnitten statt gestaucht.
   ========================================================================= */
@media(min-width:900px){
  .filmato{ align-items:stretch; }
  .filmato > div{ align-self:center; }          /* der Text bleibt mittig */
  .telaio{
    aspect-ratio:auto; max-height:none;
    height:100%; min-height:340px; align-self:stretch;
  }
}
/* Ein leichter Rahmen statt der inneren Kante — eine Linie, nicht zwei. */
.telaio{ border:1px solid rgb(255 255 255 / .22); border-radius:6px; }
.telaio::after{ content:none; }
/* Das Video darf die Zeilenhöhe nicht selbst bestimmen — sonst gibt seine
   eigene Größe (464 × 832) die Höhe vor und der Rahmen wächst wieder. */
@media(min-width:900px){
  .telaio video{ position:absolute; inset:0; width:100%; height:100%; }
}

/* =========================================================================
   Zeitleiste: Satz überarbeitet
   Die Jahre bilden jetzt eine rechte Kante zum Text, der Zeilenfall ist
   auf eine lesbare Länge begrenzt, und lange deutsche Wörter dürfen trennen.
   ========================================================================= */
@media(min-width:760px){
  .tappa{
    grid-template-columns:minmax(120px, max-content) 1fr;
    gap:clamp(28px,3vw,var(--s5));
    align-items:start;
  }
  .tappa .anno{ text-align:right; }
}
.tappa .anno{
  letter-spacing:-.035em; line-height:1;
  /* Versalhöhe auf die erste Textzeile legen */
  padding-top:.12em;
}
.tappa p:not(.anno){
  max-width:58ch;                 /* kürzere Zeile, ruhigeres Lesen */
  color:#4d586a;                  /* etwas mehr Präsenz, 7:1 auf Weiß */
  line-height:1.62;
}

/* Lange Wörter dürfen trennen — im Deutschen sonst ein zerrissener Rand.
   Die Sprache steht im html-Element, die Trennmuster kommen vom Browser. */
p, li, figcaption, .guida{ hyphens:auto; overflow-wrap:break-word; }
h1, h2, h3, .frase, .frase-lunga, .cifra, .anno, .bottone{ hyphens:none; }

/* Alle Etappen teilen sich eine Spalte, sonst richtet sich jede für sich aus
   und die Jahre stehen ungleich weit rechts. Subgrid gibt die Spalten der
   Zeitleiste an jede Etappe weiter. */
@media(min-width:760px){
  @supports (grid-template-columns: subgrid){
    .storia{ display:grid; grid-template-columns:minmax(120px, max-content) 1fr; }
    .tappa{ grid-column:1 / -1; grid-template-columns:subgrid; }
  }
}
/* Jahr und erste Textzeile auf dieselbe Schriftlinie stellen. */
@media(min-width:760px){
  .tappa{ align-items:baseline; }
  .tappa .anno{ padding-top:0; }
}
/* Auf dem Telefon stehen Jahr und Text untereinander — dort braucht das Jahr
   etwas Abstand nach unten und der Text darf die volle Breite nutzen. */
@media(max-width:759px){
  .tappa{ gap:10px; }
  .tappa .anno{ text-align:left; }
  .tappa p:not(.anno){ max-width:none; }
}

/* =========================================================================
   Ansprechpartner mit Bild
   Das Porträt steht oben in der Karte — ein Bild in einer Karte bekommt keine
   eigene Höhe, nur die Kante (siehe Schattensystem).
   ========================================================================= */
.persona.con-foto{ display:flex; flex-direction:column; padding:0; }
.persona .ritratto{
  margin:0; aspect-ratio:4/5; overflow:clip; position:relative;
  background:var(--blu-chiaro); box-shadow:var(--kante);
}
.persona .ritratto picture{ position:absolute; inset:0; display:block; }
.persona .ritratto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  transition:transform .7s var(--ease);
}
@media(hover:hover){ .persona:hover .ritratto img{ transform:scale(1.04); } }
/* Fehlt ein Foto: ruhiges Feld mit der Raute, gleiche Höhe wie die anderen. */
.persona .ritratto.vuoto{
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(59,123,224,.10), transparent 70%),
    var(--blu-chiaro);
}
.persona.con-foto .dati{ padding:clamp(24px,2.6vw,var(--s5)); }
.persona:hover{ transform:none; }   /* die Karte selbst bleibt liegen */
@media(max-width:819px){
  .persona.con-foto{ flex-direction:row; align-items:stretch; }
  .persona.con-foto .ritratto{ flex:0 0 38%; aspect-ratio:auto; }
  .persona.con-foto .dati{ flex:1; }
}
@media(max-width:520px){
  .persona.con-foto{ flex-direction:column; }
  .persona.con-foto .ritratto{ flex:none; aspect-ratio:4/3; }
}

/* Solange nicht alle Porträts da sind: eines neben der Überschrift. */
.accanto{ display:grid; gap:var(--s4); }
@media(min-width:900px){ .accanto{ grid-template-columns:auto 1fr; align-items:start; } }
.ritratto-guida{
  margin:0; width:clamp(150px,16vw,210px); aspect-ratio:4/5;
  position:relative; overflow:clip; border-radius:3px;
  box-shadow:var(--kante), var(--e2);
}
.ritratto-guida picture{ position:absolute; inset:0; display:block; }
.ritratto-guida img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.ritratto-guida figcaption{
  position:absolute; inset:auto 0 0 0; padding:22px 12px 10px; color:#fff;
  font-size:.76rem; letter-spacing:.04em;
  background:linear-gradient(transparent, rgba(9,21,58,.85));
}
/* Mehrere Porträts nebeneinander, solange nicht alle drei vorliegen. */
.ritratti{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.ritratti .ritratto-guida{ width:clamp(126px,12vw,168px); }

/* =========================================================================
   Ansprechpartner: drei eigenständige Karten
   Vorher ein zusammenhängendes Raster mit Haarlinien dazwischen — das las sich
   wie eine Tabelle. Jetzt drei getrennte Felder auf Ebene 2, beim Zeigen eine
   Ebene höher und drei Pixel angehoben, wie es das Schattensystem für Karten
   vorsieht. Der Verbund selbst bekommt keine Höhe mehr.
   ========================================================================= */
.persone{
  gap:clamp(16px,1.8vw,28px);
  background:none; border:0; box-shadow:none;
}
.persona{
  background:var(--bianco); border-radius:4px; overflow:clip;
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease);
}
@media(hover:hover){
  .persona:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
/* Das Bild liegt in der Karte: keine zweite Höhe, nur eine Trennlinie zum Text. */
.persona .ritratto{
  box-shadow:none;
  border-bottom:1px solid rgb(var(--sh) / var(--sh-kante));
}
.persona .ritratto.vuoto{ border-bottom:0; }
@media(prefers-reduced-motion:reduce){ .persona:hover{ transform:none; } }

/* =========================================================================
   Weiße Schrift auf Bild: gemessen, nicht geschätzt
   Der Untergrund wird abgedunkelt — nicht die Schrift beschattet. Ein
   Textschatten auf unruhigem Bild frisst Kontrast, statt ihn zu schaffen.
   Zielwert 4,5:1 auch dort, wo für große Schrift 3:1 genügen würde.
   ========================================================================= */

/* Kopfbereich: der Text steht unten links, dort liegt der Verlauf am dichtesten. */
.hero::before{
  background:
    linear-gradient(105deg, rgba(6,15,42,.86) 0%, rgba(6,15,42,.66) 34%,
                    rgba(6,15,42,.28) 64%, rgba(6,15,42,.10) 100%),
    linear-gradient(180deg, rgba(6,15,42,.52) 0%, rgba(6,15,42,.14) 30%,
                    rgba(6,15,42,.80) 100%);
}
@media(max-width:900px){
  .hero::before{
    background:linear-gradient(180deg, rgba(6,15,42,.62) 0%, rgba(6,15,42,.34) 26%,
                               rgba(6,15,42,.88) 72%, rgba(6,15,42,.92) 100%);
  }
}

/* Bildbänder: der Satz steht mittig, also ein weicher Kern in der Mitte. */
.fascia::after{
  background:
    radial-gradient(58% 62% at 50% 50%, rgba(6,15,42,.74), rgba(6,15,42,.34) 70%, transparent 100%),
    linear-gradient(180deg, rgba(6,15,42,.62), rgba(6,15,42,.40) 45%, rgba(6,15,42,.70));
}

/* Aussagen: das Hintergrundbild tritt zurück, der Kern wird dichter. */
.dichiarazione::before{ opacity:.42; }
.dichiarazione[data-sfondo="porto-schema"]::before{ opacity:.58; }
.dichiarazione::after{
  background:radial-gradient(62% 62% at 50% 50%, rgba(6,15,42,.78), rgba(6,15,42,.90) 100%);
}
/* Nachgezogen, bis auch die hellsten Stellen über 4,5:1 liegen. */
.hero::before{
  background:
    linear-gradient(105deg, rgba(6,15,42,.92) 0%, rgba(6,15,42,.76) 34%,
                    rgba(6,15,42,.34) 64%, rgba(6,15,42,.12) 100%),
    linear-gradient(180deg, rgba(6,15,42,.56) 0%, rgba(6,15,42,.18) 30%,
                    rgba(6,15,42,.86) 100%);
}
.hero-foto img{ opacity:.44; }
.dichiarazione::before{ opacity:.34; }
.dichiarazione[data-sfondo="porto-schema"]::before{ opacity:.5; }
.dichiarazione::after{
  background:radial-gradient(62% 62% at 50% 50%, rgba(6,15,42,.86), rgba(6,15,42,.93) 100%);
}
/* Das hervorgehobene Wort im Kopfbereich steht auf einem Foto, nicht auf einer
   Fläche: dort trägt das kräftige Akzentblau nicht. Heller Ton, gemessen. */
.hero h1 em{ color:#cfe1ff; }

/* Routenseite: der Text steht auf ganzflächigen Fotos. Der Verlauf davor war
   auf der Textseite zu dünn — Kennung und Fließtext lagen unter 4,5:1. */
.scene::after{
  background:linear-gradient(90deg, rgba(6,15,42,.94) 0%, rgba(6,15,42,.80) 34%,
                             rgba(6,15,42,.36) 70%, rgba(6,15,42,.12) 100%);
}
@media(max-width:900px){
  .scene::after{
    background:linear-gradient(180deg, rgba(6,15,42,.66) 0%, rgba(6,15,42,.86) 45%,
                               rgba(6,15,42,.94) 100%);
  }
}
.stazione .occhiello{ color:#cfe1ff; }
.stazione .guida{ color:#e6ecf8; }
/* Auf dem Telefon sitzt die Karte unten rechts — der Text wird nach oben
   gerückt, damit er nicht dahinter läuft. */
@media(max-width:900px){
  .stazione{ padding-bottom:clamp(140px,20vh,180px); }
}

/* ---------- Soziale Netze im Fuß ---------------------------------------- */
.social{ display:flex; gap:10px; margin-top:var(--s3); }
.social a{
  display:grid; place-items:center; width:44px; height:44px; border-radius:4px;
  color:var(--grigio-blu); border:1px solid var(--linea-scura);
  transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.social svg{ width:20px; height:20px; fill:currentColor; }
@media(hover:hover){
  .social a:hover{ color:#fff; border-color:rgba(255,255,255,.4);
                   background:rgba(255,255,255,.08); transform:translateY(-2px); }
}

/* =========================================================================
   Anlage in Zahlen
   ========================================================================= */
.misure{ display:grid; gap:clamp(16px,1.8vw,28px); }
@media(min-width:700px){ .misure{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1000px){ .misure{ grid-template-columns:repeat(4,1fr); } }
.misura{
  background:var(--bianco); border-radius:4px; padding:clamp(24px,2.4vw,var(--s5));
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease);
}
@media(hover:hover){
  .misura:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
.misura .cifra{ font-size:clamp(2.4rem,4.4vw,3.4rem); }
.misura .cifra--parola{
  font-family:var(--display); font-weight:800; color:var(--blu);
  font-size:clamp(1.7rem,2.8vw,2.3rem); line-height:1.1; letter-spacing:-.02em;
}
.misura .unita-lunga{
  font-family:var(--testo); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--segnale-testo);
  margin-top:6px;
}
.misura > p:last-child{ color:var(--grigio); font-size:.94rem; margin-top:var(--s2); }

/* =========================================================================
   Ablauf: sechs Schritte
   ========================================================================= */
.lavoro{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea);
         border:1px solid var(--linea); border-radius:4px; overflow:clip; }
@media(min-width:760px){ .lavoro{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .lavoro{ grid-template-columns:repeat(3,1fr); } }
.passo-lavoro{
  background:var(--bianco); padding:clamp(26px,2.6vw,var(--s5));
  position:relative; transition:background .35s ease;
}
.passo-lavoro:hover{ background:var(--carta); }
.passo-lavoro .num{
  display:block; font-family:var(--display); font-weight:800;
  font-size:.78rem; letter-spacing:.22em; color:var(--segnale-testo);
  margin-bottom:var(--s3);
}
.passo-lavoro h3{ margin-bottom:var(--s2); }
.passo-lavoro p{ color:var(--grigio); font-size:.95rem; }

/* Ursprungssitz im Kontaktblock */
.sede-storica{ margin-top:var(--s4); display:block !important; min-height:0 !important; }
.sede-storica b{ color:var(--blu); font-weight:600; }
.nota-sede{ margin-top:10px; font-size:.86rem; display:block !important; min-height:0 !important; }

/* Häfen auf der Karte */
.porti-rotta .porto circle{ fill:#8fb6ff; opacity:.55; }
.porti-rotta .porto text{
  font-family:var(--testo); font-size:19px; fill:#c9d8f5; letter-spacing:.03em;
  paint-order:stroke; stroke:rgba(9,21,58,.75); stroke-width:5px; stroke-linejoin:round;
}
.visibile .porti-rotta{ opacity:0; animation:entra 1s var(--ease) 1.6s forwards; }
@media(prefers-reduced-motion:reduce){ .visibile .porti-rotta{ opacity:1; animation:none; } }

/* =========================================================================
   Fußzeile: mittig, mit Lichtkante statt Schatten
   Auf dunklen Flächen trägt kein Schatten — die Tiefe kommt aus einer hellen
   Kante an der Oberkante und einer leicht aufgehellten Fläche.
   ========================================================================= */
.piede{
  padding-block:clamp(56px,7vw,var(--s8));
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .09);
  text-align:center;
}
.piede-centro{
  display:flex; flex-direction:column; align-items:center; gap:var(--s4);
}
.logo-piede{ margin:0 auto; background-position:center; }
.piede-claim{ margin:0; max-width:44ch; color:var(--grigio-blu); }

.social{ justify-content:center; margin-top:0; }
.social a{
  border-color:rgb(255 255 255 / .16);
  box-shadow:var(--kante), var(--e2);
}
@media(hover:hover){
  .social a:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
.social a:active{ box-shadow:var(--kante), var(--e1); transform:scale(.96); }

.piede-legale{
  margin:0; padding-top:var(--s4); width:100%;
  border-top:1px solid rgb(255 255 255 / .10);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:6px 14px; font-size:.84rem; color:var(--grigio-blu);
}
.piede-legale a{ padding-block:8px; }
.piede-legale .punto{ opacity:.4; }
.piede-legale .credito{ opacity:.72; }
@media(hover:hover){ .piede-legale a:hover{ color:#fff; } }
@media(max-width:520px){
  .piede-legale{ flex-direction:column; gap:2px; }
  .piede-legale .punto{ display:none; }
}
/* Die Trennlinie soll den Fuß gliedern, nicht ihn durchschneiden. */
.piede-legale{
  max-width:min(100%, 560px); margin-inline:auto;
  padding-top:var(--s5); margin-top:var(--s2);
}
@media(max-width:520px){
  .piede{ padding-block:clamp(48px,12vw,72px); }
  .piede-centro{ gap:var(--s3); }
  .piede-legale{ gap:0; padding-top:var(--s4); }
  .piede-legale a{ padding-block:12px; }
}

/* =========================================================================
   Stellenseite: die drei Bereiche
   ========================================================================= */
.aree{ display:grid; gap:clamp(16px,1.8vw,26px); }
@media(min-width:820px){ .aree{ grid-template-columns:repeat(3,1fr); } }
.area{
  background:var(--bianco); border-radius:4px; padding:clamp(26px,2.6vw,var(--s5));
  box-shadow:var(--kante), var(--e2);
  transition:box-shadow .24s var(--ease), transform .24s var(--ease);
}
@media(hover:hover){
  .area:hover{ box-shadow:var(--kante), var(--e3); transform:translateY(-3px); }
}
.area h3{ margin-bottom:var(--s2); }
.area p{ color:var(--grigio); font-size:.95rem; }
.area ul{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.area li{
  font-size:.78rem; letter-spacing:.06em; color:var(--blu);
  background:var(--blu-chiaro); border-radius:999px; padding:6px 14px;
}
.nota-aperte{ margin-top:clamp(32px,4vw,var(--s6)); max-width:62ch; }
.candidatura h2{ margin-bottom:var(--s6); }

/* =========================================================================
   Seitenkopf mit Bild — nach demselben Prinzip wie der Kopfbereich:
   das Bild trägt die Fläche, der Verlauf hält nur den Text lesbar, und es
   bewegt sich langsam. Der Kopf wird höher, damit von einer hochformatigen
   Aufnahme mehr zu sehen ist als ein Streifen.
   ========================================================================= */
.intro--foto{
  min-height:min(64svh, 620px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(150px,20vw,220px) clamp(48px,6vw,84px);
}
.intro-foto{ position:absolute; inset:0; z-index:0; overflow:clip; }
.intro-foto figure{ margin:0; height:100%; }
.intro-foto picture{ display:block; height:100%; }
.intro-foto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  opacity:.40; filter:grayscale(.22) contrast(1.02) brightness(.80);
  animation:kenburns 30s var(--ease) infinite alternate;
}
.intro--foto::after{
  background:
    /* dort am dichtesten, wo der Text steht: unten links */
    /* Die Textspalte endet bei etwa der halben Breite — bis dahin trägt der
       Verlauf voll, danach gibt er das Bild frei. */
    linear-gradient(90deg, rgba(6,15,42,.93) 0%, rgba(6,15,42,.90) 44%,
                    rgba(6,15,42,.62) 60%, rgba(6,15,42,.18) 84%, transparent 100%),
    radial-gradient(120% 110% at 4% 96%, rgba(6,15,42,.55) 0%,
                    rgba(6,15,42,.24) 55%, transparent 85%),
    linear-gradient(180deg, rgba(6,15,42,.34) 0%, rgba(6,15,42,.06) 28%,
                    rgba(6,15,42,.52) 76%, rgba(6,15,42,.74) 100%);
}
@media(max-width:900px){
  .intro--foto{ min-height:min(58svh, 480px); padding-block:120px clamp(36px,8vw,56px); }
  .intro-foto img{ opacity:.34; object-position:50% 46%; }
  .intro--foto::after{
    background:linear-gradient(180deg, rgba(6,15,42,.62) 0%, rgba(6,15,42,.34) 24%,
                               rgba(6,15,42,.86) 62%, rgba(6,15,42,.94) 100%);
  }
}
@media(prefers-reduced-motion:reduce){ .intro-foto img{ animation:none; } }

/* Die Vorzeile steht auf dem Telefon über einer helleren Bildstelle. */
/* Auf einem Foto trägt das kräftige Akzentblau nicht — wie im Kopfbereich weiß. */
.intro--foto .occhiello{ color:#fff; }

/* Eine einzelne Leistungskarte darf kein zweispaltiges Raster aufspannen —
   sonst steht daneben ein leerer Kasten. */
.servizi--uno{ grid-template-columns:1fr !important; }
.nota-gallery{ margin:0 0 var(--s5); max-width:62ch; }

/* =========================================================================
   Bildbetrachter
   ========================================================================= */
.lente{
  border:0; padding:0; max-width:100vw; max-height:100vh; width:100%; height:100%;
  background:rgba(6,15,42,.94); color:#fff;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(8px,2vw,24px);
}
.lente::backdrop{ background:rgba(6,15,42,.9); }
.lente[open]{ animation:apparire .3s var(--ease); }
.lente figure{ margin:0; display:grid; place-items:center; gap:var(--s3); padding:clamp(48px,6vh,80px) 0; }
.lente img{
  max-width:min(92vw, 1400px); max-height:78vh; width:auto; height:auto;
  border-radius:4px; box-shadow:0 24px 60px rgb(0 0 0 / .55);
}
.lente figcaption{ font-size:.94rem; color:#cfdcf5; text-align:center; }
.lente button{
  background:rgba(255,255,255,.08); border:1px solid rgb(255 255 255 / .18);
  color:#fff; border-radius:4px; min-width:52px; min-height:52px;
  font-size:1.6rem; line-height:1; cursor:pointer;
  transition:background .25s ease, transform .25s var(--ease);
}
@media(hover:hover){ .lente button:hover{ background:rgba(255,255,255,.18); transform:translateY(-2px); } }
.lente-chiudi{ position:absolute; top:16px; right:16px; font-size:1.4rem; }
.lente-conta{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-size:.82rem; letter-spacing:.14em; color:#9fb4d8;
}
@media(max-width:700px){
  .lente{ grid-template-columns:1fr; }
  .lente-prec, .lente-succ{ position:absolute; bottom:56px; }
  .lente-prec{ left:16px; } .lente-succ{ right:16px; }
  .lente img{ max-height:62vh; }
}
/* Die Kacheln sind jetzt bedienbar */
.griglia-foto figure{ cursor:zoom-in; }
.griglia-foto figure:focus-visible{ outline:3px solid var(--segnale); outline-offset:3px; }

/* =========================================================================
   Standortkarte im Kontaktblock — selbst gezeichnet, keine fremden Kacheln,
   also keine Cookies und keine Verbindung zu Dritten.
   ========================================================================= */
.sede-mappa{
  margin:var(--s5) 0 0; grid-column:1 / -1;
  background:var(--blu-scuro); border-radius:4px; overflow:clip;
  box-shadow:var(--kante), var(--e2);
}
.sede-mappa svg{ width:100%; height:auto; display:block; }
.carta-sede .coste path{
  fill:rgba(24,52,120,.55); stroke:#8fb6ff; stroke-width:1.4;
  stroke-linejoin:round; opacity:.5;
}
.carta-sede .luogo circle{ fill:var(--blu-scuro); stroke:#8fb6ff; stroke-width:3; }
.carta-sede .luogo.sede circle{ fill:#8fb6ff; stroke:#fff; stroke-width:4; }
.carta-sede .luogo.sede .alone{
  fill:#8fb6ff; stroke:none; opacity:.25;
  animation:pulsa-carta 3s ease-in-out infinite; transform-origin:center;
}
.carta-sede text{
  font-family:var(--testo); font-size:26px; fill:#cfdcf5;
  paint-order:stroke; stroke:rgba(9,21,58,.75); stroke-width:5px; stroke-linejoin:round;
}
.carta-sede .sede text{ font-weight:700; font-size:30px; fill:#fff; }
.sede-mappa figcaption{ padding:var(--s3) var(--s4) var(--s4); }
@media(prefers-reduced-motion:reduce){ .carta-sede .luogo.sede .alone{ animation:none; } }

/* Pflichtfelder: sichtbares Zeichen und eine Erklärung darunter. */
.obbligo{ color:var(--segnale-testo); margin-left:4px; font-weight:600; }
.nota-obbligo{
  margin-top:var(--s4); font-size:.84rem; color:var(--grigio);
}
.nota-obbligo span:first-child{ color:var(--segnale-testo); font-weight:600; }

/* Überschriften, die nur für Vorlesesoftware da sind: sie halten die
   Gliederung geschlossen, ohne die Gestaltung zu verändern. */
.solo-lettura{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Auf einem Foto steht der Vorspann in Weiß und bleibt im dunklen Teil
   des Verlaufs — gedämpftes Blaugrau trägt dort nicht. */
.intro--foto .guida{ color:#fff; max-width:48ch; }

/* Einzelne Leistungskarte: der Text soll nicht über die halbe Karte laufen
   und rechts eine leere Fläche stehen lassen. */
@media(min-width:900px){
  .servizi--uno .servizio{
    display:grid; grid-template-columns:auto 1fr auto;
    gap:clamp(24px,3vw,var(--s5)); align-items:center;
  }
  .servizi--uno .servizio{ align-items:start; row-gap:var(--s2); }
  .servizi--uno .servizio .num{ grid-column:1; grid-row:1; margin:0; padding-top:.35em; }
  .servizi--uno .servizio h3{ grid-column:2; grid-row:1; margin:0; }
  .servizi--uno .servizio p{ grid-column:2; grid-row:2; margin:0; max-width:56ch; }
  .servizi--uno .servizio ul{
    grid-column:3; grid-row:1 / span 2; margin:0;
    justify-content:flex-end; align-content:center; max-width:24ch;
  }
}
/* Pflichtfelder */
.obbl{ color:var(--segnale-testo); margin-left:.25em; font-weight:600; }
.nota-obbl{
  margin:0 0 var(--s5); font-size:.86rem; color:var(--grigio);
}

/* =========================================================================
   Eingangsanimation
   Die Raute zeichnet sich, dreht sich, die Marke kommt mit einem Lichtstreif,
   dann hebt sich der Vorhang. Nur beim ersten Aufruf je Sitzung; bei
   „reduzierter Bewegung" wird sie gar nicht erst erzeugt.
   ========================================================================= */
.entrata{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  perspective:1200px; overflow:clip;
  background:radial-gradient(120% 100% at 50% 40%, #12275c 0%, #060f2a 62%, #03060f 100%);
  animation:sipario 750ms var(--ease) 3250ms forwards;
}
.entrata::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.entrata .scena-entrata{
  position:relative; display:grid; place-items:center; transform-style:preserve-3d;
  animation:gira 1200ms var(--ease) 1250ms forwards;
}
.entrata .rombo-entrata{
  width:clamp(96px,14vw,150px); height:auto; overflow:visible;
  animation:svanisci-entrata 500ms var(--ease) 1500ms forwards;
}
.entrata .rombo-entrata path{
  fill:none; stroke:#fff; stroke-width:5; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400;
  filter:drop-shadow(0 0 14px rgba(143,182,255,.55));
  animation:traccia-entrata 1100ms var(--ease) 150ms forwards;
}
.entrata .rombo-entrata .lettera{
  stroke-width:7; stroke-dasharray:260; stroke-dashoffset:260;
  animation:traccia-entrata 900ms var(--ease) 600ms forwards;
}
.marchio-entrata{
  --img:image-set(url("../marke/logo-bianco-2x.avif") type("image/avif") 1x,
                  url("../marke/logo-bianco-3x.avif") type("image/avif") 2x);
  position:absolute; left:50%; top:50%;
  width:clamp(210px,32vw,380px); aspect-ratio:3.445;
  background-image:var(--img);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:0; transform:translate(-50%,-50%) rotateY(-180deg) scale(.94);
  animation:mostra-entrata 900ms var(--ease) 1650ms forwards;
}
@supports not (background-image:image-set(url("x.avif") type("image/avif") 1x)){
  .marchio-entrata{ --img:url("../marke/logo-bianco-3x.png"); }
}
.marchio-entrata::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(108deg, transparent 40%, rgb(255 255 255 / .55) 50%, transparent 60%);
  -webkit-mask-image:var(--img);     mask-image:var(--img);
  -webkit-mask-size:contain;         mask-size:contain;
  -webkit-mask-repeat:no-repeat;     mask-repeat:no-repeat;
  -webkit-mask-position:center;      mask-position:center;
  animation:lucido-entrata 1100ms var(--ease) 2150ms forwards;
}

@keyframes traccia-entrata{ to{ stroke-dashoffset:0; } }
@keyframes svanisci-entrata{ to{ opacity:0; } }
@keyframes gira{ from{ transform:rotateY(0); } to{ transform:rotateY(180deg); } }
@keyframes mostra-entrata{
  to{ opacity:1; transform:translate(-50%,-50%) rotateY(-180deg) scale(1); }
}
@keyframes lucido-entrata{
  0%{ opacity:0; transform:translateX(-42%); }
  15%{ opacity:1; } 85%{ opacity:1; }
  100%{ opacity:0; transform:translateX(42%); }
}
@keyframes sipario{ to{ opacity:0; visibility:hidden; transform:scale(1.04); } }
@media(prefers-reduced-motion:reduce){ .entrata{ display:none; } }

/* =========================================================================
   Angebotsformular: Auswahlkacheln und Schrittanzeige
   Vorher: unterschiedlich hohe Kacheln, eine allein in der zweiten Zeile,
   kein sichtbarer Bezug zur übrigen Seite. Jetzt gleiche Höhe, eine
   nummerierte Schrittanzeige wie in der Zeitleiste und ein Auswahlzustand,
   den man auf einen Blick sieht.
   ========================================================================= */

/* --- Schrittanzeige ---------------------------------------------------- */
.modulo .barra{
  height:2px; background:var(--linea); margin-bottom:var(--s4);
  border-radius:2px; overflow:hidden;
}
.modulo .barra i{ background:var(--blu); }
.modulo .stato{
  display:flex; align-items:baseline; gap:.5em;
  font-family:var(--display); font-weight:800; font-size:.78rem;
  letter-spacing:.2em; color:var(--segnale-testo); margin-bottom:var(--s3);
}
.modulo .stato .conta{ font-size:1.1rem; letter-spacing:0; color:var(--blu); }
.passo h2{ margin-bottom:var(--s6); }

/* --- Kacheln ----------------------------------------------------------- */
/* Flexbox statt Raster: so füllt die letzte Zeile die Breite aus. Im Raster
   blieb "Anderes" als einzelne Kachel neben drei leeren Feldern stehen. */
.scelte{
  display:flex; flex-wrap:wrap; align-items:stretch;
  gap:clamp(10px,1.1vw,14px);
}
/* min-width:0 ist nötig: sonst hält der längste Begriff die Kachel breit
   und die fünfte rutscht in die nächste Zeile. */
.scelte button{ flex:1 1 200px; min-width:0; overflow-wrap:anywhere; hyphens:auto; }
.scelte button{
  display:flex; align-items:center; gap:12px;
  min-height:76px; padding:16px 18px; border-radius:4px;
  font-weight:500; line-height:1.3; text-wrap:balance;
  font-size:.96rem;
}
/* Ein Ring links, der bei Auswahl gefüllt wird — dieselbe Sprache wie die
   Punkte an der Zeitleiste. */
.scelte button::before{
  content:""; flex:0 0 auto; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--linea-scura); background:transparent;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
@media(hover:hover){
  .scelte button:hover::before{ border-color:var(--segnale); }
}
.scelte button[aria-pressed="true"]::before{
  border-color:#fff; background:#fff; box-shadow:inset 0 0 0 3px var(--blu);
}
.scelte button[aria-pressed="true"]{ font-weight:600; }

/* Die letzte Kachel soll nicht allein in einer Zeile stehen bleiben:
   ab fünf Einträgen zwei feste Reihen statt automatischem Umbruch. */
@media(max-width:520px){
  .scelte button{ flex:1 1 100%; min-height:60px; }
}

/* --- Felder ------------------------------------------------------------ */
.campo input, .campo textarea{ border-radius:4px; padding:14px 16px; }
.campo > label, .campo > .etichetta{ margin-bottom:10px; }
.coppia{ gap:clamp(16px,2vw,var(--s4)); }
.azioni-modulo{ margin-top:var(--s7); }

/* =========================================================================
   Renderarbeit sparen und Satz feiner stellen
   ========================================================================= */

/* Kein content-visibility: gemessen wurde es damit schlechter, nicht besser
   (Median 17 % zähe Frames gegen 7 % ohne). Der Browser holt das gesparte
   Rendern genau dann nach, wenn gescrollt wird — also im ungünstigsten Moment.
   Bei einer Seite mit vielen bewegten Abschnitten lohnt es sich nicht. */

/* Überschriften brechen ausgewogen statt mit einem Wort in der letzten Zeile. */
h1, h2, h3, .frase, .frase-lunga{ text-wrap:balance; }

/* Optische Größe nutzen: Inter und Archivo haben eine opsz-Achse. Große Grade
   laufen dadurch offener, kleine robuster. Kein Kunstfett, keine Kunstkursive. */
html{ font-optical-sizing:auto; font-synthesis:none; }

/* Zeilenlänge in em statt ch: ch misst die Null, die in Inter deutlich breiter
   ist als der Durchschnittsbuchstabe — 58ch ergaben gemessene 70 Zeichen je
   Zeile statt der angepeilten 58. Ein Zeichen misst im Mittel 0,5 em, also
   ergibt 32 em rund 64 Zeichen. */
.tappa p:not(.anno){ max-width:32em; }
.intestazione .guida{ max-width:33em; }
.servizio p, .area p, .passo-lavoro p{ max-width:34em; }

/* --- Umwelt: drei knappe Punkte ---------------------------------------- */
.verdi{ display:grid; gap:clamp(16px,1.8vw,26px); }
@media(min-width:820px){ .verdi{ grid-template-columns:repeat(3,1fr); } }
.verde{
  background:var(--bianco); border-radius:4px; padding:clamp(24px,2.4vw,var(--s5));
  box-shadow:var(--kante), var(--e2);
}
.verde h3{ margin-bottom:var(--s2); font-size:1.05rem; }
.verde p{ color:var(--grigio); font-size:.95rem; max-width:34em; }
.nota-verde{ margin-top:clamp(28px,3vw,var(--s5)); font-size:.9rem; }

/* --- Offene Stelle ------------------------------------------------------ */
.posizione{
  margin-bottom:clamp(28px,3vw,var(--s6));
  background:var(--blu-chiaro); border-radius:4px;
  padding:clamp(26px,2.8vw,var(--s5));
  box-shadow:var(--kante), var(--e1);
  border-left:3px solid var(--blu);
}
.posizione h3{ margin:var(--s2) 0; }
.posizione > p{ color:var(--inchiostro); max-width:56em; }
.posizione ul{
  list-style:none; margin:var(--s4) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.posizione li{
  font-size:.78rem; letter-spacing:.06em; color:var(--blu);
  background:var(--bianco); border-radius:999px; padding:6px 14px;
  box-shadow:var(--kante);
}
.come-candidarsi{ margin-top:var(--s4); font-weight:600; color:var(--blu); }

/* Liste „Was wir für ein Angebot brauchen" */
.serve{
  list-style:none; margin:var(--s5) 0 0; padding:0;
  display:grid; gap:12px; max-width:44em;
}
.serve li{
  position:relative; padding-left:30px; color:var(--grigio);
}
.serve li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:10px; height:10px; border-radius:50%;
  border:2px solid var(--segnale); background:transparent;
}
/* Verweis von der Leistungskarte auf die ausführliche Seite */
.servizio .piu{
  display:inline-flex; align-items:center; margin-top:var(--s4);
  min-height:44px; padding-block:10px;   /* Tippfläche */
  font-weight:600; font-size:.92rem; color:var(--segnale-testo);
}
@media(hover:hover){ .servizio .piu:hover{ color:var(--blu); } }