/* Übersicht «Drei Entwürfe» für L’Enoteca.
   Farben, Schriften und Abstände kommen aus tokens.css des Kunden (unverändert aus dem Projekt lenoteca kopiert).
   Die Bühnenfarben sind dieselben wie auf den dunklen Abschnitten der Website (reise.css).
   Kontrast gerechnet: --licht auf --tinte 15.5:1, --licht-leise auf --tinte 10.4:1, --rot-gross auf --tinte 4.2:1
   (nur für grosse Schrift). Kein JavaScript: Die Seite ist eine Tür und soll überall aufgehen. */

:root {
  color-scheme: dark;
  --tinte: #151916;
  --tinte-2: #1E2420;
  --licht: #F1F3EE;
  --licht-leise: #C2CAC3;
  --rot-gross: #E23B55;
  --linie-dunkel: #3A413C;
  --fokus-dunkel: #FF9DAD;
  --rand: clamp(1.25rem, 0.5rem + 3.2vw, 3rem);
  --rahmen-max: 90rem;
  --ease-aus: var(--motion-easing-standard);
  --fs-kopf: clamp(2.75rem, 1.1rem + 6.2vw, 5rem);
  --fs-titel: clamp(1.75rem, 1.4rem + 1.1vw, 2.375rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --polster: clamp(1.25rem, 0.9rem + 1vw, 2rem);
  --z-bild: 0;
  --z-schleier: 1;
  --z-text: 2;
  --z-flaeche: 3;
  --z-korn: 10;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column;
  background-color: var(--tinte); color: var(--licht);
  font-family: var(--font-body-family); font-size: var(--font-body-size); font-weight: var(--font-body-weight);
  line-height: var(--font-body-line-height); -webkit-font-smoothing: antialiased;
}
/* Feines Korn über der ganzen Seite, wie auf der Website. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-korn); pointer-events: none;
  background-image: url("../img/korn.png"); background-size: 192px 192px; opacity: 0.07; mix-blend-mode: overlay;
}
h1, h2, p, ol { margin: 0; }
ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
main { flex: 1 0 auto; }

.rahmen { width: min(100% - 2 * var(--rand), var(--rahmen-max)); margin-inline: auto; }
.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprung {
  position: absolute; left: var(--rand); top: 0.5rem; z-index: var(--z-korn);
  padding: 0.75rem 1rem; background-color: var(--tinte-2); color: var(--licht); border-radius: var(--radius-md);
  transform: translateY(-200%);
}
.sprung:focus-visible { transform: none; }
:focus-visible { outline: 3px solid var(--fokus-dunkel); outline-offset: 4px; border-radius: var(--radius-sm); }

/* ---------- Kopf ---------- */
.kopf { border-block-end: 1px solid var(--linie-dunkel); }
.kopf-innen { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.kopf-logo { width: 9.375rem; height: auto; }
.kopf .marke { text-align: end; }
.marke {
  font-size: var(--font-label-size); font-weight: var(--font-label-weight); line-height: var(--font-label-line-height);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--licht-leise);
}

/* ---------- Auftakt ---------- */
.auftakt {
  display: grid; gap: var(--space-lg) var(--space-3xl);
  padding-block: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem) clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem);
}
.auftakt .marke { margin-block-end: 0.75rem; }
h1 {
  font-family: var(--font-display-family); font-weight: var(--font-display-weight); font-size: var(--fs-kopf);
  line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 400; }
/* Die Betonung steht immer in der zweiten Zeile, so bleibt der Auftakt auf jeder Breite gleich hoch. */
h1 em { display: block; color: var(--rot-gross); padding-block-end: 0.1em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--licht-leise); max-width: 34em; }

/* ---------- Die drei Entwürfe ---------- */
.entwuerfe { display: grid; gap: var(--space-md); padding-block-end: clamp(1.5rem, 1rem + 2vw, 3rem); }
.entwurf {
  position: relative; isolation: isolate; overflow: clip; display: flex; flex-direction: column;
  min-width: 0; min-height: 26rem;
  border-radius: var(--radius-lg); background-color: var(--tinte-2);
}
/* Bildmitte der querliegenden Standbilder (Handy und Zwischenbreite). Die hohen Tafeln nutzen eigene Zuschnitte. */
.entwurf-1 { --mitte: 72%; }
.entwurf-2 { --mitte: 64%; }
.entwurf-3 { --mitte: 64%; }
@media (min-width: 1024px) { .entwurf { --mitte: 50%; } }
.entwurf-bild { position: absolute; inset: 0; z-index: var(--z-bild); }
.entwurf-bild img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--mitte, 50%) 50%;
  transition: transform 1200ms var(--ease-aus);
}
/* Schleier: unten Tinte für den Text, oben nur ein Hauch für die Nummer. */
.entwurf::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-schleier);
  background-image: linear-gradient(to top, rgb(21 25 22 / 0.97) 0%, rgb(21 25 22 / 0.9) 44%, rgb(21 25 22 / 0.38) 66%, rgb(21 25 22 / 0.26) 80%, rgb(21 25 22 / 0.74) 100%);
  transition: opacity var(--motion-duration-slow) var(--ease-aus);
}
.entwurf-nr {
  position: relative; z-index: var(--z-text); display: flex; align-items: baseline; gap: 0.7em;
  padding: var(--polster) var(--polster) 0;
  font-size: var(--font-label-size); font-weight: var(--font-label-weight); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--licht);
}
.entwurf-nr i {
  font-family: var(--font-display-family); font-style: italic; font-weight: 400;
  font-size: clamp(2.5rem, 2rem + 1.4vw, 3.5rem); line-height: 1; letter-spacing: 0; text-transform: none;
}
.entwurf-text { position: relative; z-index: var(--z-text); margin-block-start: auto; display: grid; gap: var(--space-sm); padding: var(--polster); }
.entwurf h2 {
  font-family: var(--font-heading-family); font-weight: var(--font-heading-weight); font-size: var(--fs-titel);
  line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance;
}
.entwurf h2 a { color: inherit; text-decoration: none; }
/* Die ganze Karte ist die Trefferfläche des Links im Titel. */
.entwurf h2 a::after { content: ""; position: absolute; inset: 0; z-index: var(--z-flaeche); }
.entwurf:has(a:focus-visible) { box-shadow: inset 0 0 0 2px var(--fokus-dunkel); }
.entwurf-zeile { max-width: 30em; font-size: 1rem; line-height: 1.5; color: var(--licht-leise); }
.entwurf-los {
  display: inline-flex; align-items: center; gap: 0.6em; margin-block-start: var(--space-sm);
  font-family: var(--font-button-family); font-size: var(--font-button-size); font-weight: var(--font-button-weight); color: var(--licht);
}
.entwurf-los span { border-block-end: 1px solid currentColor; padding-block-end: 0.15em; }
.entwurf-los svg { width: 1.15em; height: 1.15em; flex: none; transition: transform var(--motion-duration-base) var(--ease-aus); }

@media (hover: hover) {
  .entwurf h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
  .entwurf:hover .entwurf-bild img { transform: scale(1.05); }
  .entwurf:hover::before { opacity: 0.86; }
  .entwurf:hover .entwurf-los svg { transform: translateX(0.3em); }
}
.entwurf:active .entwurf-los svg { transform: translateX(0.45em); }

/* Zwischenbreite: eine Spalte, die Bilder liegen quer. Nur eine Mindesthöhe, kein festes Seitenverhältnis:
   Zusammen mit einer Mindesthöhe würde es die Tafel breiter machen als die Spalte. */
@media (min-width: 480px) {
  .entwurf { min-height: clamp(22rem, 56vw, 34rem); }
}
/* Ab hier stehen die drei Entwürfe als hohe Tafeln nebeneinander. */
@media (min-width: 1024px) {
  .entwuerfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .entwurf { min-height: 0; height: clamp(27rem, 100svh - 25rem, 46rem); }
}
@media (min-width: 1280px) {
  .auftakt { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; }
  /* Kopf 4rem, Auftakt rund 16rem, unten 1.5rem Luft: Die Tafeln enden im ersten Bildschirm. */
  .entwurf { height: clamp(28rem, 100svh - 21.75rem, 48rem); }
}

/* ---------- Fehlseite (404.html) ---------- */
.fehlseite { grid-template-columns: minmax(0, 1fr); padding-block-end: var(--space-4xl); }
.zurueck {
  display: inline-flex; align-items: center; min-height: var(--comp-button-primary-height); padding: var(--comp-button-primary-padding);
  border-radius: var(--comp-button-primary-rounded); background-color: #C1022C; color: #FBFCFA;
  font-family: var(--font-button-family); font-size: var(--font-button-size); font-weight: var(--font-button-weight); text-decoration: none;
  transition: background-color var(--motion-duration-fast) var(--ease-aus);
}
.zurueck:hover, .zurueck:active { background-color: #99042F; }

/* ---------- Fuss ---------- */
.fuss { border-block-start: 1px solid var(--linie-dunkel); }
.fuss-innen {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-xl);
  padding-block: var(--space-lg); font-size: var(--font-small-size); line-height: var(--font-small-line-height); color: var(--licht-leise);
}

/* ---------- Auftritt ----------
   Nur Deckkraft und Verschiebung. «backwards» gilt bloss während der Verzögerung, danach stehen die normalen
   Regeln wieder (Hover bleibt weich). Ohne Animation ist alles von Anfang an sichtbar. */
@keyframes auf { from { opacity: 0; transform: translateY(1.5rem); } }
@keyframes naeher { from { transform: scale(1.12); } }
@media (prefers-reduced-motion: no-preference) {
  .auftakt > * { animation: auf 700ms var(--ease-aus) backwards; }
  .auftakt > .lead { animation-delay: 90ms; }
  .entwurf { animation: auf 760ms var(--ease-aus) backwards; }
  .entwurf:nth-child(1) { animation-delay: 140ms; }
  .entwurf:nth-child(2) { animation-delay: 220ms; }
  .entwurf:nth-child(3) { animation-delay: 300ms; }
  .entwurf-bild { animation: naeher 1500ms var(--ease-aus) backwards; }
  .entwurf:nth-child(1) .entwurf-bild { animation-delay: 140ms; }
  .entwurf:nth-child(2) .entwurf-bild { animation-delay: 220ms; }
  .entwurf:nth-child(3) .entwurf-bild { animation-delay: 300ms; }
}
@media (prefers-reduced-motion: reduce) {
  .entwurf-bild img, .entwurf::before, .entwurf-los svg { transition: none; }
  .entwurf:hover .entwurf-bild img { transform: none; }
}