/* Karte Arlberg Mountain Resort — Farben, Schriften und Bühne wie auf
   https://arlberg-mountain-resort.com. Logo, Winterbild und Schriften kommen
   aus dem Repo PSL-MCP/AMR-Website (veroeffentlichung/fotos/hero_winter.webp,
   paket/assets/font-*.ttf, Logo aus der Kopfzeile). Ändert sich die Marke
   drüben, hier nachziehen. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300; font-display: swap; src: url("fraunces-300.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("archivo-400.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("archivo-700.ttf") format("truetype"); }

.karte--amr {
  --nacht: #0f1f36;
  --nacht-70: rgba(15, 31, 54, .72);
  --karmin: #a4123a;
  --dunst: #f5f7fa;
  background: #fff;
  color: var(--nacht);
  font-family: "Archivo", system-ui, sans-serif;
}

/* Logo auf weißem Band wie in der Kopfzeile drüben; es bleibt auch über dem Bild stehen. */
.amr-kopf { position: relative; z-index: 3; background: #fff; width: calc(100% + 3rem); margin: -2rem -1.5rem 0; padding: 2.25rem 1.5rem 1.75rem; box-shadow: 0 1px 0 rgba(15, 31, 54, .08); }
.amr-kopf img { width: min(230px, 72%); height: auto; }

/* Das Bild der Startseite drüben (.buehne .schicht) */
.amr-bild {
  position: absolute; inset: 0; z-index: 1;
  background: url("hero_winter.webp") 50% 40% / cover no-repeat;
  opacity: 0; transform: scale(1.04);
  transition: opacity 700ms ease, transform 1400ms cubic-bezier(.2, .7, .3, 1);
}
.amr-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 54, .05) 40%, rgba(15, 31, 54, .45));
}

.amr-inhalt { position: relative; z-index: 2; transition: opacity 400ms ease; }
.amr-inhalt .etikett {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .24em; color: var(--karmin); margin: 0;
}
.amr-inhalt h2 {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1; letter-spacing: -.02em;
  margin: .9rem auto 0; max-width: 11ch; color: var(--nacht);
}
/* .buehne .strich drüben: Haarlinie vor dem Text */
.amr-inhalt .strich { display: flex; gap: 14px; margin: 1.4rem auto 0; max-width: 19rem; text-align: left; }
.amr-inhalt .strich i { display: block; width: 32px; height: 1px; background: var(--nacht); margin-top: 11px; flex: none; }
.amr-inhalt .strich p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--nacht-70); }

/* .knopf-rand drüben, hier weiß über dem Bild */
.amr-knopf {
  position: absolute; z-index: 3; left: 50%; top: 58%;
  transform: translate(-50%, -50%) translateY(10px);
  border: 1px solid rgba(255, 255, 255, .8); background: rgba(15, 31, 54, .28);
  backdrop-filter: blur(6px);
  padding: 15px 26px; color: #fff; white-space: nowrap;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  opacity: 0; transition: opacity 400ms ease, transform 400ms ease, border-color 200ms, background 200ms;
}
.amr-knopf:hover { border-color: #fff; }

@media (hover: hover) {
  .karte--amr:hover .amr-bild,
  .karte--amr:focus-visible .amr-bild { opacity: 1; transform: scale(1); }
  .karte--amr:hover .amr-inhalt,
  .karte--amr:focus-visible .amr-inhalt { opacity: 0; }
  .karte--amr:hover .amr-knopf,
  .karte--amr:focus-visible .amr-knopf { opacity: 1; transform: translate(-50%, -50%); }
  .karte--amr:hover .amr-knopf { background: rgba(164, 18, 58, .55); border-color: #fff; }
}

/* Am Handy gibt es kein Darüberfahren: das Bild steht unter dem Text, der Knopf darauf. */
@media (hover: none) {
  .karte--amr { display: flex; flex-direction: column; }
  .karte--amr { padding-bottom: 0; }
  .amr-inhalt { margin: 1.5rem 0 0; }
  .amr-bild { order: 3; position: relative; inset: auto; flex: 1 0 15rem; width: calc(100% + 3rem); opacity: 1; transform: none; margin: 1.75rem -1.5rem 0; }
  .amr-knopf { top: auto; bottom: 2.25rem; opacity: 1; transform: translateX(-50%); }
}