/* L'Enoteca, zweite Startseite («Ganz Italien auf einer Karte»). Lädt nach reise.css, nur auf /variante-2/.
   Lesart: wie die erste Startseite (Verkaufs-Demo für einen Weinhändler, filmisch, Regler 8/9/3).
   Asset-Look: Kerzenlicht auf dunklem Holz, ein grosses Stielglas, eine Reliefkarte als sauberer Druck auf
   hellem Papier (Meer in Salbei), das Rot des Weins als einziger Akzent.

   Drei Anordnungen der Weinkarte:
     schmal  (unter 1024 px)  Kartenblatt in voller Breite, darunter die Tafel
     mittel  (ab 1024 px)     Tafel links, Kartenblatt rechts
     Bühne   (ab 1100 px breit, ab 720 px hoch, Querformat)   die Karte als ganzes Bild, die Tafel links darüber
   Die Bedingungen der Bühne und des Hochformats stehen gleich in bewegung.js (INTRO_GANZ, INTRO_HOCH)
   und in weinkarte.mjs (HOCH). */

.regionen-name, .tafel-region h3, .tafel-lage-grad { font-optical-sizing: none; font-variation-settings: "opsz" 30; }

/* ---------- Kopf: es wird eingeschenkt ---------- */
.intro .flug-bild img, .intro .flug-film { object-position: 60% 50%; }
.intro .flug-schleier {
  background:
    linear-gradient(180deg, rgb(21 25 22 / 0.66) 0, rgb(21 25 22 / 0.12) 24%, rgb(21 25 22 / 0) 44%, rgb(21 25 22 / 0.62) 100%),
    linear-gradient(90deg, rgb(21 25 22 / 0.8) 0, rgb(21 25 22 / 0.42) 34%, rgb(21 25 22 / 0) 60%);
}
.intro h1 { font-size: clamp(3rem, 0.9rem + 6.6vw, 7.5rem); max-width: 6.8em; }
/* Die Knöpfe stehen unter dem Text und nicht rechts daneben: Rechts steht das Glas, sein Fuss bleibt frei. */
.intro .flug-zeile { grid-template-columns: minmax(0, 34rem); justify-content: start; }
@media (max-width: 767.98px), (max-aspect-ratio: 5/6) {
  /* Hohe Bildfolge: Das Bild steht oben, darunter läuft es in die Tinte aus. Dort steht der Text. */
  .intro .flug-bild img, .intro .flug-film { object-position: 50% 0; }
  .intro .flug-schleier {
    background: linear-gradient(180deg, rgb(21 25 22 / 0.5) 0, rgb(21 25 22 / 0) 20%, rgb(21 25 22 / 0) 44%, rgb(21 25 22 / 0.8) 64%, var(--tinte) 92%);
  }
}
@media (max-width: 479.98px) {
  .intro .knopfreihe .knopf { flex: 1 1 auto; }
}
.intro-lauf { display: none; }

/* ---------- I · Die Weinkarte ---------- */
.weinkarte { position: relative; background: var(--tinte); }
/* Das Blatt zeigt den Teil des Bildes, auf dem die Karte liegt (32,5 % bis 97,5 % der Bildbreite). Die Fläche
   darin ist immer das ganze Bild im Format 16:9: So gilt für die Siegel überall dasselbe Raster. */
.weinkarte-blatt { position: relative; aspect-ratio: 1040 / 900; overflow: clip; }
.weinkarte-flaeche { position: absolute; top: 0; left: -50%; width: 153.846%; aspect-ratio: 16 / 9; }
/* Ist eine Region gewählt, rückt die Karte ein Stück auf sie zu. Der Drehpunkt ist das Siegel der Region
   (karte.js setzt --zx und --zy), es bleibt also an seinem Platz. */
.weinkarte-zoom {
  position: absolute; inset: 0; transform-origin: var(--zx, 50%) var(--zy, 50%);
  transition: transform 0.9s var(--ease-aus), transform-origin 0.9s var(--ease-aus);
}
.weinkarte[data-region] .weinkarte-zoom { transform: scale(1.32); }
.weinkarte-zoom > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.weinkarte-schleier { display: none; }
.pins { position: absolute; inset: 0; }
/* Kerzenlicht: Ein warmer Fleck folgt dem Zeiger über die Karte (karte.js, nur mit feinem Zeiger). */
.weinkarte-licht {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: radial-gradient(circle 15vmax at var(--lx, 50%) var(--ly, 50%), rgb(255 221 168 / 0.85), rgb(255 221 168 / 0) 72%);
  transition: opacity 0.5s var(--ease-aus);
}
.weinkarte-flaeche[data-licht] .weinkarte-licht { opacity: 1; }

/* Siegel: Weinrot mit der Zahl der Weine. Die Fläche zum Tippen ist 44 px gross. */
.pin {
  position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); translate: -50% -50%;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-voll);
  color: #FFFFFF; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--motion-duration-base) var(--ease-aus);
}
.pin::before {
  content: ""; position: absolute; inset: 0.6rem; border-radius: inherit;
  background: radial-gradient(circle at 36% 30%, #D2143C 0, var(--rot) 46%, var(--rot-tief) 100%);
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.92), 0 5px 12px rgb(0 0 0 / 0.5);
  transition: transform var(--motion-duration-base) var(--ease-aus), box-shadow var(--motion-duration-base) var(--ease-aus);
}
.pin-zahl { position: relative; font-size: 0.6875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.pin-name {
  position: absolute; left: calc(100% - 0.4rem); top: 50%; translate: 0 -50%; padding: 0.3rem 0.6rem; border-radius: var(--radius-m);
  background: var(--tinte); color: var(--licht); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.4); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--dauer-kurz) var(--ease-aus), visibility 0s linear var(--dauer-kurz);
}
.pin[data-seite="links"] .pin-name { left: auto; right: calc(100% - 0.4rem); }
.pin:focus-visible, .pin[data-hell], .pin[data-aktiv] { z-index: 2; }
.pin:focus-visible { outline: 3px solid var(--tinte); outline-offset: -0.35rem; }
.pin:focus-visible .pin-name, .pin[data-hell] .pin-name, .pin[data-aktiv] .pin-name { opacity: 1; visibility: visible; transition-delay: 0s; }
.pin[data-hell]::before, .pin[data-aktiv]::before { transform: scale(1.22); }
.pin[data-aktiv]::before, .pin[data-treffer]::before { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 7px rgb(193 2 44 / 0.34), 0 6px 16px rgb(0 0 0 / 0.55); }
@media (hover: hover) {
  .pin:hover { z-index: 2; }
  .pin:hover::before { transform: scale(1.22); }
  .pin:hover .pin-name { opacity: 1; visibility: visible; transition-delay: 0s; }
}
.pin:active::before { transform: scale(0.94); }
/* Ist eine Region gewählt, treten die anderen zurück. Bei der Suche treten die Regionen ohne Treffer zurück. */
.weinkarte[data-region] .pin:not([data-aktiv]):not([data-hell]) { opacity: 0.6; }
.pin[data-leer]:not([data-hell]) { opacity: 0.3; }
/* Das gewählte Siegel schlägt zweimal an. */
.pin[data-aktiv]::after { content: ""; position: absolute; inset: 0.6rem; border-radius: inherit; border: 2px solid #FFFFFF; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .pin[data-aktiv]::after { animation: siegel-ring 1.3s var(--ease-aus) 2; }
}
@keyframes siegel-ring { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(2.5); } }
@media (min-width: 768px) {
  .pin::before, .pin[data-aktiv]::after { inset: 0.45rem; }
  .pin-zahl { font-size: 0.8125rem; }
  .weinkarte[data-region] .weinkarte-zoom { transform: scale(1.18); }
}

/* Tafel: die Weinkarte zum Lesen. Zuerst die Liste der Regionen mit der Suche, nach der Wahl die Region selbst. */
.weinkarte-tafel { width: min(100% - 2 * var(--rand), 40rem); margin-inline: auto; padding-block: var(--space-2xl) var(--abstand-sektion); }
.weinkarte-tafel .kapitel { margin-block-end: var(--space-md); }
.weinkarte-tafel h2 { font-size: clamp(1.9rem, 1.35rem + 1.7vw, 2.75rem); }

.tafel-suche { display: grid; gap: 0.4rem; margin-block-start: var(--space-lg); }
.tafel-suche label { font-size: var(--font-small-size); font-weight: 600; color: var(--text-leise); }
.tafel-suche input {
  width: 100%; min-height: 2.875rem; padding: 0.55rem 0.9rem; border: 1px solid rgb(241 243 238 / 0.42); border-radius: var(--radius-m);
  background-color: rgb(21 25 22 / 0.6); color: var(--licht); font: inherit; -webkit-appearance: none; appearance: none;
  transition: border-color var(--dauer-kurz) var(--ease-aus), background-color var(--dauer-kurz) var(--ease-aus);
}
.tafel-suche input::placeholder { color: #A9B2AA; opacity: 1; }
@media (hover: hover) { .tafel-suche input:hover { border-color: var(--licht); } }
.tafel-suche input:focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 2px; border-color: var(--licht); }
.tafel-suche input:active { background-color: rgb(21 25 22 / 0.85); }
.tafel-suche input:disabled { opacity: 0.5; }
.tafel-stand { margin-block-start: var(--space-sm); font-size: var(--font-small-size); color: var(--text-leise); }
.tafel-stand:empty { display: none; }

.regionen { display: grid; margin-block-start: var(--space-md); border-block-start: 1px solid var(--linie); }
.regionen a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-md);
  min-height: 2.75rem; padding-block: 0.5rem; border-block-end: 1px solid var(--color-line-soft); text-decoration: none;
  transition: color var(--dauer-kurz) var(--ease-aus);
}
.regionen-name { font-family: var(--schrift-titel); font-size: 1.25rem; line-height: 1.15; transition: transform var(--motion-duration-base) var(--ease-aus); }
.regionen-zahl { font-size: var(--font-small-size); font-variant-numeric: tabular-nums; color: var(--text-leise); }
.regionen a[data-hell], .regionen a[data-aktiv] { color: var(--rot-licht); }
.regionen a[data-hell] .regionen-name { transform: translateX(0.3em); }
@media (hover: hover) {
  .regionen a:hover { color: var(--rot-licht); }
  .regionen a:hover .regionen-name { transform: translateX(0.3em); }
}
.regionen a:active { color: #FFFFFF; }
@media (min-width: 480px) {
  /* Zwei Spalten, spaltenweise gefüllt: links der Norden, rechts der Süden. */
  .regionen { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--zeilen), auto); grid-auto-flow: column; column-gap: var(--space-xl); }
}
.tafel-hinweis { margin-block-start: var(--space-md); font-size: var(--font-small-size); color: var(--text-leise); }
/* Mit karte.js sagt die Beschriftung der Suche, was zu tun ist. */
html.karte-bereit .tafel-hinweis { display: none; }
.weinkarte[data-suche-an] .regionen { display: none; }

/* Weine einer Region (und Treffer der Suche): Flasche, Name, Eckdaten, Preis, Knopf für die Bestellliste. */
.tafel-weine { align-self: stretch; width: 100%; border-block-start: 1px solid var(--linie); scrollbar-width: thin; scrollbar-color: var(--linie-dunkel) transparent; }
.tafel-treffer { margin-block-start: var(--space-md); }
.tafel-wein {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.75rem;
  padding-block: 0.4rem; border-block-end: 1px solid var(--color-line-soft);
}
.tafel-wein-link {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 0.8rem;
  min-height: 3.5rem; text-decoration: none; border-radius: var(--radius-m);
}
/* Feste Masse und Einpassen: Das Bild bestimmt nie die Höhe der Zeile. */
.tafel-wein-link img, .tafel-wein-leer { grid-row: 1 / span 2; align-self: center; width: 1.6rem; height: 3.5rem; object-fit: contain; object-position: 50% 100%; }
.tafel-wein-leer { display: block; border: 1px dashed var(--linie); border-radius: 40% 40% 8% 8% / 16% 16% 4% 4%; }
.tafel-wein-name { align-self: end; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.tafel-wein-angaben { align-self: start; font-size: var(--font-small-size); line-height: 1.3; color: var(--text-leise); }
.tafel-wein-preis { font-size: var(--font-small-size); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tafel-wein-fehlt { max-width: 6.5em; font-size: 0.75rem; line-height: 1.2; color: var(--text-leise); text-align: end; }
.tafel-wein .wein-dazu { position: static; flex: none; }
@media (max-width: 479.98px) {
  /* Schmal: Der Preis rückt unter den Namen, rechts bleibt nur der Knopf. So hat der Name Platz. */
  .tafel-wein { grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 0.75rem; }
  .tafel-wein-preis { grid-column: 1; grid-row: 2; padding-inline-start: 2.4rem; }
  .tafel-wein .wein-dazu, .tafel-wein-fehlt { grid-column: 2; grid-row: 1 / span 2; }
}
@media (hover: hover) {
  .tafel-wein-link:hover .tafel-wein-name { color: var(--rot-licht); text-decoration: underline; text-underline-offset: 0.2em; }
}
.tafel-wein-link:active .tafel-wein-name { color: #FFFFFF; }
.tafel-mehr { font-size: var(--font-small-size); }

/* Ohne karte.js stehen alle Regionen untereinander. Mit karte.js ist immer nur eine offen. */
.tafel-region {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); margin-block-start: var(--space-2xl); padding-block-start: var(--space-2xl);
  border-block-start: 1px solid var(--linie);
}
html.karte-bereit .tafel-region { display: none; margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
html.karte-bereit .tafel-region[data-offen] { display: flex; }
html.karte-bereit .weinkarte[data-region] .tafel-liste { display: none; }
.tafel-zurueck {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0; border: 0; background: none;
  color: var(--text-leise); font-size: var(--font-small-size); font-weight: 600;
  transition: color var(--dauer-kurz) var(--ease-aus);
}
.tafel-zurueck .symbol { transform: scaleX(-1); }
@media (hover: hover) { .tafel-zurueck:hover { color: var(--licht); } }
.tafel-zurueck:active { color: #FFFFFF; }
.tafel-lage {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2em 0.9em; max-width: none;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-leise);
}
.tafel-lage-grad {
  font-family: var(--schrift-titel); font-size: 1.75rem; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums; color: var(--rot-licht);
}
.tafel-region h3 { font-family: var(--schrift-titel); font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); font-weight: 400; line-height: 1.04; letter-spacing: -0.012em; }
.tafel-angaben { max-width: 30em; color: var(--text-leise); }

/* ---------- mittel: Tafel links, Kartenblatt rechts ---------- */
@media (min-width: 1024px) {
  .weinkarte {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-2xl);
    padding: var(--abstand-sektion) var(--rand);
  }
  .weinkarte-blatt { order: 2; border-radius: var(--radius-l); box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); }
  .weinkarte-tafel { order: 1; width: auto; margin: 0; padding: 0; }
}

/* ---------- Bühne: die Karte als ganzes Bild ----------
   --b ist die Breite des Bildes. Es ist so gross, dass Italien zwischen Kopfzeile und unterem Rand Platz hat,
   und höchstens so breit, dass links davon die Tafel frei steht (das Kartenblatt beginnt bei 33,1 % der Bildbreite). */
@media (min-width: 1100px) and (min-height: 720px) and (min-aspect-ratio: 5/4) {
  .weinkarte {
    --tafel-zone: 35rem;
    --b: min((100svh - var(--oben)) * 1.852, (100vw - var(--tafel-zone)) / 0.669);
    --tafel-hoehe: calc(100svh - var(--oben) - 3.5rem);
    display: block; min-height: 100svh; padding: 0; overflow: clip; isolation: isolate;
  }
  .weinkarte-blatt { position: static; aspect-ratio: auto; overflow: visible; border-radius: 0; box-shadow: none; }
  .weinkarte-flaeche {
    z-index: -2; left: auto; right: 0; width: var(--b);
    top: calc(var(--oben) + (100svh - var(--oben) - var(--b) * 0.5625) / 2);
  }
  /* Das Bild läuft nach links in die Tinte aus (Maske am Bild selbst, damit beim Zurückfahren nie eine harte
     Kante steht). Links davon steht die Tafel auf ruhigem Grund, das Kartenblatt beginnt bei 33,5 %. Das Glas
     auf dem Tisch reicht bis 25,7 % der Bildbreite: Die Maske öffnet erst danach, sonst scheint sein Rand als
     Bogen hinter der Liste durch. */
  .weinkarte-zoom > img {
    -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 25.5%, rgb(0 0 0 / 0.45) 29.5%, #000 33%);
    mask-image: linear-gradient(90deg, rgb(0 0 0 / 0) 25.5%, rgb(0 0 0 / 0.45) 29.5%, #000 33%);
  }
  /* Schleier: oben für die Kopfzeile, unten leicht, links über dem Rand des Tisches. So bleibt die Tafel auch
     dann auf ruhigem Grund, wenn die Karte auf eine Region zurückt und sich dabei nach links schiebt. */
  .weinkarte-schleier {
    display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      linear-gradient(90deg, var(--tinte) calc(100% - var(--b) * 0.75), rgb(21 25 22 / 0) calc(100% - var(--b) * 0.67)),
      linear-gradient(180deg, var(--tinte) 0, rgb(21 25 22 / 0.6) calc(var(--oben) * 0.7), rgb(21 25 22 / 0) calc(var(--oben) + 2.5rem)),
      linear-gradient(0deg, rgb(21 25 22 / 0.5) 0, rgb(21 25 22 / 0) 12%);
  }
  .weinkarte-tafel {
    width: min(30rem, 100% - 2 * var(--rand)); min-height: 100svh; margin: 0 0 0 max(var(--rand), (100% - var(--rahmen-max)) / 2);
    padding-block: calc(var(--oben) + 1.5rem) 2rem; display: grid; align-content: center;
  }
  .regionen a { min-height: 2.5rem; padding-block: 0.4rem; }
  /* Liste und Region passen immer in die Bühne. Was länger ist (viele Weine, viele Treffer), rollt in sich. */
  html.karte-bereit .tafel-liste { display: flex; flex-direction: column; max-height: var(--tafel-hoehe); }
  html.karte-bereit .tafel-region[data-offen] { max-height: var(--tafel-hoehe); gap: 0.7rem; }
  html.karte-bereit .tafel-weine { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding-inline-end: 0.5rem; }
  html.karte-bereit .tafel-liste > :not(.tafel-weine), html.karte-bereit .tafel-region > :not(.tafel-weine) { flex: none; }
}

/* ---------- Mit Bewegung (bewegung.js setzt data-intro-modus) ----------
   ganz: Kopf und Karte liegen übereinander in einer gepinnten Bühne, der Film geht in die Karte über.
   kopf: Der Kopf klebt, der Film läuft, dann schiebt sich die Weinkarte darüber (wie die Etappen der Reise). */
.intro[data-intro-modus="ganz"] { height: 100svh; overflow: clip; }
.intro[data-intro-modus="ganz"] .intro-kopf { position: absolute; inset: 0; z-index: 2; height: 100%; min-height: 0; }
.intro[data-intro-modus="ganz"] .weinkarte { height: 100%; min-height: 0; }
.intro[data-intro-modus="ganz"] .weinkarte-tafel { height: 100%; min-height: 0; }
.intro[data-intro-modus="ganz"] .weinkarte-flaeche { will-change: transform; }
.intro[data-intro-modus="kopf"] .intro-kopf { position: sticky; top: 0; height: 100svh; min-height: 0; }
.intro[data-intro-modus="kopf"] .intro-lauf { display: block; height: 130svh; }
.intro[data-intro-modus="kopf"] .weinkarte {
  z-index: 1; overflow: clip; border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: 0 -24px 60px rgb(0 0 0 / 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .pin, .pin::before, .pin-name, .regionen a, .regionen-name, .tafel-zurueck, .tafel-suche input, .weinkarte-zoom, .weinkarte-licht { transition: none; }
  .pin::before, .pin:hover::before, .pin[data-hell]::before, .pin[data-aktiv]::before, .pin:active::before,
  .regionen a:hover .regionen-name, .regionen a[data-hell] .regionen-name { transform: none; }
  .weinkarte[data-region] .weinkarte-zoom { transform: none; }
}