/* =========================================================
   Startseiten-Banner ("Floating Toast")
   - Inhalt & Anzeige gesteuert ueber assets/data/banner.json
   - Desktop: unten LINKS (der Begruessungstext steht rechts -> keine Ueberdeckung)
   - Mobile:  kompakt unten, mittig (der Text steht oben ab 18vh -> keine Ueberdeckung)
   - Groesse bewusst begrenzt, damit in KEINER Ansicht Text verdeckt wird
   ========================================================= */

.jra-banner{
  position: fixed;
  left: 28px;
  bottom: 28px;
  z-index: 1000;

  width: 320px;
  max-width: calc(100vw - 40px);
  box-sizing: border-box;

  background: #ffffff;
  color: #1c2430;
  padding: 18px 20px 20px;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(12, 24, 48, .28);
  border: 1px solid rgba(58, 124, 212, .12);

  font-family: inherit;

  /* Startzustand: komplett unterhalb des Viewports -> schiebt sich hoch */
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  transition:
    transform .6s cubic-bezier(.16, 1, .3, 1),
    opacity   .5s ease;
}

.jra-banner.show{
  transform: translateY(0);
  opacity: 1;
}

/* ===== Optionale Grafik =====================================================
   Nur vorhanden, wenn in banner.json ein „bild" steht. Ohne Bild aendert sich
   NICHTS am bisherigen Aussehen.

   Das Bild steht NEBEN dem Fliesstext (User-Wunsch 2026-08-15):
   Hoehe = immer genau VIER Textzeilen, Breite ergibt sich aus dem
   Seitenverhaeltnis. Damit „vier Zeilen" auch dann stimmt, wenn die
   Schriftgroesse sich aendert (mobil kleiner), sind Groesse und Zeilenhoehe des
   Fliesstextes als Variablen hinterlegt und die Bildhoehe rechnet damit —
   statt eine Pixelzahl zu raten, die beim naechsten Schriftwechsel nicht mehr
   passt. */
.jra-banner{
  --nl-desc-groesse: .92rem;
  --nl-desc-zeile: 1.45;
}

.jra-banner__zeile{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.jra-banner__bild{
  /* NICHT schrumpfen lassen: Sonst quetscht der Fliesstext den Rahmen schmaler
     als das Seitenverhaeltnis, `object-fit: contain` legt Balken an und das
     Logo steht am Ende doch niedriger als vier Zeilen. Der Deckel unten
     begrenzt breite Logos, alles andere behaelt seine natuerliche Breite. */
  flex: 0 0 auto;
  margin: 0;
  line-height: 0;                 /* kein Spalt unter dem Bild */
  /* Deckel gehoert an den RAHMEN, nicht ans Bild: Ein `max-width` in Prozent
     am <img> rechnet gegen die Breite des Rahmens — und die entsteht selbst
     erst aus dem Bild. Ergebnis war ein winziges Logo (63px statt 156px).
     Am Rahmen bezieht sich der Deckel auf die Zeile und wirkt wie gedacht:
     ein sehr breites Logo nimmt hoechstens die Haelfte, sonst entscheidet das
     Seitenverhaeltnis. */
  max-width: 45%;
}

.jra-banner__bild img{
  display: block;
  height: calc(4 * var(--nl-desc-groesse) * var(--nl-desc-zeile));
  width: auto;                    /* Seitenverhaeltnis bleibt erhalten */
  max-width: 100%;
  object-fit: contain;            /* nichts abschneiden */
}

/* Im Nebeneinander traegt die Zeile den Abstand nach unten. */
.jra-banner__zeile .jra-banner__desc{ margin-bottom: 0; }

.jra-banner__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.jra-banner__badge{
  display: inline-block;
  background: #3a7cd4;            /* Corporate Blau */
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.jra-banner__close{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin: -4px -6px -4px 0;
  border: 0;
  background: transparent;
  color: #8a94a3;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.jra-banner__close:hover{ background: #f0f3f8; color: #333; }

.jra-banner__title{
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 6px;
  color: #1c2430;
}

.jra-banner__desc{
  font-size: var(--nl-desc-groesse);
  line-height: var(--nl-desc-zeile);
  color: #5a6472;
  margin-bottom: 16px;
}

.jra-banner__btn{
  display: inline-block;
  background: #f5a000;            /* Orange Akzent */
  color: #1c2430 !important;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.jra-banner__btn:hover{
  background: #ffae1a;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(245, 160, 0, .35);
}

/* ===== Mobile: kompakt unten, mittig ===== */
@media (max-width: 980px){
  .jra-banner{
    left: 12px;
    right: 12px;
    bottom: 10vh;          /* 10% Abstand zum Seitenende (mobil hoeher gesetzt) */
    width: auto;
    max-width: 460px;
    margin-inline: auto;
    padding: 14px 16px 16px;
  }
  .jra-banner{ --nl-desc-groesse: .88rem; }
  .jra-banner__zeile{ gap: 12px; margin-bottom: 12px; }
  .jra-banner__title{ font-size: 1.02rem; }
  .jra-banner__desc{ margin-bottom: 12px; }
}

/* ===== Desktop: flacher (~1/3 weniger Hoehe) + breiter =====
   Nur >=981px, damit Mobile (<=980px) unveraendert bleibt. */
@media (min-width: 981px){
  .jra-banner{
    width: 480px;               /* vorher 320px -> breiter */
    padding: 12px 24px 14px;    /* vorher 18/20/20 -> flacher */
  }
  .jra-banner__head{ margin-bottom: 6px; }   /* vorher 10px */
  .jra-banner__title{ margin-bottom: 4px; }  /* vorher 6px  */
  .jra-banner__desc{ margin-bottom: 10px; }  /* vorher 16px */
  .jra-banner__zeile{ margin-bottom: 10px; }
  .jra-banner__btn{ padding: 8px 18px; }     /* vorher 10px 18px */
}

/* Sehr kleine Hoehen: Banner nicht anzeigen, um Text nie zu verdecken */
@media (max-height: 480px){
  .jra-banner{ display: none; }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  .jra-banner{ transition: opacity .3s ease; transform: none; }
}