/* Karte ALLWAYS Brandschutz — Farben, Schrift und Vorhang wie auf
   https://allways-brandschutz.com (css/styles.css und css/curtain.css,
   Stand 28.04.2026, dort ?v=20260428-horizontal-bands). Die Website liegt
   in keinem unserer Repos; übernommen ist ihr ausgelieferter Code, auf die
   Karte zugeschnitten: .hero heißt hier .aw-buehne, die Maße folgen der Karte
   statt dem Bildschirm (vh), und Knöpfe, Ziehen und Mausrad entfallen —
   die Karte schließt beim Darüberfahren. Ändert sich der Vorhang drüben,
   hier nachziehen. */

@font-face { font-family: "Inter"; src: url("inter-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("inter-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

.karte--allways {
  --aw-text: #2b2b27;
  --aw-akzent: #E8531E;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--aw-text);
  background: #0a0a0a;
}

/* ===== BÜHNE (drüben .hero) ===== */
.aw-buehne {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  --curtain-shade: 0.18;
  --rail-glow: 0.11;
  --guide-width: 14px;
}
.aw-buehne::before,
.aw-buehne::after { content: ""; position: absolute; pointer-events: none; }
/* Kasten oben, in dem der Vorhang aufgerollt ist */
.aw-buehne::before {
  top: 0; left: 0; width: 100%; height: 30px; z-index: 4;
  background:
    linear-gradient(180deg, rgba(7, 10, 12, 0.98), rgba(25, 30, 33, 0.96) 48%, rgba(5, 7, 9, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 80px);
  border-bottom: 1px solid rgba(190, 200, 205, 0.22);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.34), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
/* Führungsschienen links und rechts */
.aw-buehne::after {
  inset: 0; z-index: 5;
  background: linear-gradient(90deg,
    rgba(4, 6, 8, 0.98) 0, rgba(22, 27, 30, 0.98) 6px, rgba(115, 124, 128, 0.76) 7px, rgba(20, 24, 27, 0.98) 11px,
    transparent 11px, transparent calc(100% - 11px),
    rgba(20, 24, 27, 0.98) calc(100% - 11px), rgba(115, 124, 128, 0.76) calc(100% - 7px), rgba(22, 27, 30, 0.98) calc(100% - 6px), rgba(4, 6, 8, 0.98) 100%);
  box-shadow: inset 16px 0 22px rgba(0, 0, 0, 0.28), inset -16px 0 22px rgba(0, 0, 0, 0.28);
}

.aw-hintergrund { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.aw-hintergrund img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.95) contrast(1.03) brightness(1.03);
  transform: scale(1.02);
}
/* Drüben steht nur das Logo vor der Halle; auf der Karte steht Text, darum
   ein hellerer Schleier in der Mitte, damit er lesbar bleibt. */
.aw-hintergrund::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 95% 62% at 50% 46%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.5) 60%, transparent 90%),
    linear-gradient(180deg, rgba(3, 7, 12, 0.06), rgba(3, 7, 12, var(--curtain-shade)));
}

/* ===== VORHANG ===== */
.aw-buehne .hero__curtain {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
  will-change: transform;
  transform: translate3d(0, -85%, 0);
  filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.42));
}
.aw-buehne.aw-bewegt .hero__curtain { filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.52)); }

.aw-buehne .curtain__assembly {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    linear-gradient(90deg, rgba(8, 10, 12, 0.92), transparent var(--guide-width), transparent calc(100% - var(--guide-width)), rgba(8, 10, 12, 0.92)),
    linear-gradient(180deg, #20262c, #151a1f 72%, #0c0f12);
}
.aw-buehne .curtain__assembly::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("curtain-horizontal-fabric-1200w.webp");
  background-size: cover; background-position: center bottom;
  filter: contrast(1.08) saturate(1.02) brightness(0.98);
}
.aw-buehne .curtain__assembly::after {
  content: ""; position: absolute; inset: 0 var(--guide-width); z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 32%, rgba(0, 0, 0, 0.24));
  mix-blend-mode: soft-light;
}
.aw-buehne .curtain__cloth {
  position: absolute; top: -1.2%; right: var(--guide-width); bottom: 16px; left: var(--guide-width);
  display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(8, minmax(0, 1fr));
  overflow: hidden; z-index: 2; opacity: 0.16; mix-blend-mode: soft-light;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(0, 0, 0, 0.34), transparent 44%),
    linear-gradient(90deg, rgba(8, 10, 12, 0.46), transparent 12%, transparent 88%, rgba(8, 10, 12, 0.46));
  box-shadow: inset 0 18px 28px rgba(255, 255, 255, 0.055), inset 0 -34px 38px rgba(0, 0, 0, 0.5);
}
.aw-buehne .curtain__panel {
  position: relative; min-width: 0; min-height: 0; width: 100%;
  transform: translateY(var(--drop)) scaleY(var(--stretch));
  transform-origin: 50% 0;
  will-change: transform, background-position;
  background:
    radial-gradient(ellipse at 50% 74%, rgba(255, 255, 255, 0.11), transparent 34%),
    radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.3), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 36%, rgba(0, 0, 0, 0.26)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 8px);
  background-size: 100% 130%, 100% 110%, 100% 100%, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -8px 12px rgba(0, 0, 0, 0.34);
}
.aw-buehne .curtain__panel::before {
  content: ""; position: absolute; right: 0; bottom: -2px; left: 0; z-index: 2; height: 4px; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.58) 46%, rgba(255, 255, 255, 0.05)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 7px);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05), 0 2px 7px rgba(0, 0, 0, 0.42);
}
.aw-buehne .curtain__panel:last-child::before { display: none; }

/* Unterschiene mit dem orangen Streifen */
.aw-buehne .curtain__weight {
  position: absolute; right: var(--guide-width); bottom: 0; left: var(--guide-width); z-index: 4;
  opacity: 0.92; height: 16px;
  background:
    linear-gradient(180deg, rgba(132, 142, 145, 0.36), rgba(25, 29, 31, 0.98) 34%, rgba(7, 8, 9, 0.98)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 118px);
  border-top: 1px solid rgba(230, 238, 242, 0.24);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.42);
}
.aw-buehne .curtain__weight::after {
  content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255, 65, 22, 0.14), rgba(255, 73, 22, 0.76), rgba(255, 65, 22, 0.14));
  box-shadow: 0 -3px 12px rgba(255, 50, 20, var(--rail-glow));
}

.aw-buehne .hero__curtain.is-moving .curtain__panel { animation: panelRide 1250ms ease-in-out infinite alternate; animation-delay: var(--ride-delay); }
.aw-buehne .hero__curtain.is-moving .curtain__cloth { opacity: 0.24; }
.aw-buehne .hero__curtain.is-settling .curtain__panel { animation: panelSettle 780ms cubic-bezier(0.18, 0.86, 0.24, 1) both; animation-delay: var(--settle-delay); }
.aw-buehne .hero__curtain.is-settling .curtain__cloth { opacity: 0.2; }
.aw-buehne .hero__curtain.is-moving .curtain__weight { animation: weightLoad 900ms ease-in-out infinite; }
.aw-buehne .hero__curtain.is-settling .curtain__weight { animation: weightSettle 660ms ease-out both; }

@keyframes panelRide {
  0% { transform: translateY(var(--drop)) scaleY(var(--stretch)); background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { transform: translateY(calc(var(--drop) + var(--bounce))) scaleY(calc(var(--stretch) + 0.001)); background-position: 0 1%, 0 -1%, 0 0, 0 0; }
}
@keyframes panelSettle {
  0% { transform: translateY(calc(var(--drop) + var(--bounce))) scaleY(calc(var(--stretch) + 0.003)); }
  44% { transform: translateY(var(--drop)) scaleY(calc(var(--stretch) - 0.001)); }
  72% { transform: translateY(calc(var(--drop) + 0.12%)) scaleY(calc(var(--stretch) + 0.001)); }
  100% { transform: translateY(var(--drop)) scaleY(var(--stretch)); }
}
@keyframes weightLoad { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@keyframes weightSettle { 0% { transform: translateY(2px); } 45% { transform: translateY(-1px); } 100% { transform: translateY(0); } }

/* ===== INHALT ÜBER DEM VORHANG (drüben .hero__logo, z-index 3) ===== */
.aw-inhalt { position: relative; z-index: 3; }
.aw-inhalt .logo-text { fill: var(--aw-text); transition: fill 0.4s ease; }
.aw-inhalt svg { width: min(220px, 70%); height: auto; filter: drop-shadow(0 2px 14px rgba(255, 255, 255, 0.5)); }
.aw-inhalt h2 { font-family: inherit; font-weight: 700; font-size: 1.375rem; letter-spacing: .01em; color: var(--aw-text); transition: color 0.4s ease; }
.aw-inhalt .slogan { font-size: 1.0625rem; margin: .35rem 0 0; color: var(--aw-text); transition: color 0.4s ease; }
.aw-inhalt .details { font-size: .9375rem; line-height: 1.55; margin: 1.1rem auto 0; max-width: 19rem; color: #4a4a45; transition: color 0.4s ease; }
/* Das Logo steht unter dem aufgerollten Streifen, nicht in dessen Schatten. */
.karte--allways .karte__kopf { padding-top: 24%; }
/* Hat der Vorhang Logo oder Text erreicht, werden sie weiß — wie drüben das Logo. */
.karte--allways.aw-dunkel-logo .logo-text { fill: #fff; }
.karte--allways.aw-dunkel-logo .aw-inhalt svg { filter: drop-shadow(0 2px 14px rgba(0, 0, 0, 0.6)); }
.karte--allways.aw-dunkel .aw-inhalt h2,
.karte--allways.aw-dunkel .aw-inhalt .slogan,
.karte--allways.aw-dunkel .aw-inhalt .details { color: #fff; }

/* Knopf und Verhalten wie .amr-knopf (marken/amr/karte.css), damit alle drei
   Karten gleich antworten: beim Darüberfahren weicht der Text (das Logo
   bleibt), der Knopf erscheint in der Mitte über dem fahrenden Vorhang.
   Schrift und Orange bleiben die von ALLWAYS. Hier nur Anzeige, die Karte
   selbst ist der Link. */
.karte--allways .karte__inhalt { transition: opacity 400ms ease, color 0.4s ease; }
.aw-knopf {
  position: absolute; z-index: 6; left: 50%; top: 58%;
  transform: translate(-50%, -50%) translateY(10px);
  padding: 15px 26px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.45); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 400ms ease, transform 400ms ease, background 200ms, border-color 200ms;
}
.karte--allways.aw-zu .aw-knopf { background: rgba(232, 83, 30, 0.85); border-color: #fff; }
@media (hover: hover) {
  .karte--allways:hover .karte__inhalt,
  .karte--allways:focus-visible .karte__inhalt { opacity: 0; }
  .karte--allways:hover .aw-knopf,
  .karte--allways:focus-visible .aw-knopf { opacity: 1; transform: translate(-50%, -50%); }
}
/* Am Handy gibt es kein Darüberfahren: der Knopf steht unter dem Text. */
@media (hover: none) {
  .karte--allways { padding-bottom: 6.5rem; }
  .aw-knopf { top: auto; bottom: 2.25rem; opacity: 1; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .aw-buehne .curtain__panel, .aw-buehne .curtain__weight { animation: none !important; }
  .aw-inhalt .logo-text, .aw-inhalt h2, .aw-inhalt .slogan, .aw-inhalt .details { transition: none; }
}