/* AKARION Alert Bar
   Werte aus dem Akarion Design System 2026 (components/fig-tokens.css, tokens/*.css).
   Die Tokens stehen hier am Balken, weil die Live-Seiten sie (noch) nicht global laden. */

.ak-alert-bar {
  --accent-primary: rgb(213,0,50);
  --bg-light: rgb(255,255,255);
  --bg-paper: rgb(243,244,251);
  --border-card: rgb(232,237,235);
  --feedback-error-bg: rgb(252,232,230);
  --feedback-error: rgb(179,38,30);
  --feedback-success-bg: rgb(227,243,234);
  --feedback-success: rgb(23,110,74);
  --feedback-warning-bg: rgb(251,240,222);
  --feedback-warning: rgb(180,83,9);
  --text-on-light-primary: rgb(21,23,24);
  --text-on-navy-primary: rgb(255,255,255);
  --text-on-accent: var(--text-on-navy-primary);
  --font-sans: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --layout-content-max: 1320px;
  --layout-gutter: 40px;
  --layout-gutter-mobile: 16px;

  /* Variantenfarben, Standard = Hell (Paper). Kein Navy: der Header ist Navy. */
  --ak-ab-bg: var(--bg-paper);
  --ak-ab-text: var(--text-on-light-primary);
  --ak-ab-akzent: var(--accent-primary);
  --ak-ab-icon: var(--accent-primary);
  --ak-ab-link: var(--text-on-light-primary);

  position: relative;
  background: var(--ak-ab-bg);
  color: var(--ak-ab-text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
}

.ak-alert-bar[hidden] { display: none; }

/* Varianten */
.ak-alert-bar--rot {
  --ak-ab-bg: var(--accent-primary);
  --ak-ab-text: var(--text-on-accent);
  --ak-ab-akzent: var(--text-on-accent);
  --ak-ab-icon: var(--text-on-accent);
  --ak-ab-link: var(--text-on-accent);
}
.ak-alert-bar--warnung {
  --ak-ab-bg: var(--feedback-warning-bg);
  --ak-ab-text: var(--text-on-light-primary);
  --ak-ab-akzent: var(--feedback-warning);
  --ak-ab-icon: var(--feedback-warning);
  --ak-ab-link: var(--text-on-light-primary);
}
.ak-alert-bar--stoerung {
  --ak-ab-bg: var(--feedback-error-bg);
  --ak-ab-text: var(--text-on-light-primary);
  --ak-ab-akzent: var(--feedback-error);
  --ak-ab-icon: var(--feedback-error);
  --ak-ab-link: var(--text-on-light-primary);
}
.ak-alert-bar--behoben {
  --ak-ab-bg: var(--feedback-success-bg);
  --ak-ab-text: var(--text-on-light-primary);
  --ak-ab-akzent: var(--feedback-success);
  --ak-ab-icon: var(--feedback-success);
  --ak-ab-link: var(--text-on-light-primary);
}

/* Aufbau */
.ak-alert-bar__inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--layout-content-max) + 2 * var(--layout-gutter));
  margin: 0 auto;
  padding: 8px 56px;
}

.ak-alert-bar__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  min-height: 32px;
}

.ak-alert-bar__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ak-ab-icon);
}
.ak-alert-bar__icon svg { display: block; }

.ak-alert-bar__label {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ak-ab-akzent);
}

.ak-alert-bar .ak-alert-bar__text,
.ak-alert-bar .ak-alert-bar__text p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ak-ab-text);
}
.ak-alert-bar .ak-alert-bar__text strong,
.ak-alert-bar .ak-alert-bar__text b {
  font-weight: 700;
  white-space: nowrap; /* fette Angaben wie „Halle 6, Stand 6-219“ nicht umbrechen */
}
.ak-alert-bar .ak-alert-bar__text a {
  color: inherit;
  text-decoration: underline;
}

.ak-alert-bar__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

/* Button sm (DS Button): primary auf Hell, secondary auf farbigen Flächen */
.ak-alert-bar a.ak-alert-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--accent-primary);
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-on-accent);
  text-decoration: none;
}
.ak-alert-bar a.ak-alert-bar__btn:hover,
.ak-alert-bar a.ak-alert-bar__btn:focus-visible {
  background: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)), linear-gradient(var(--accent-primary), var(--accent-primary));
  color: var(--text-on-accent);
  text-decoration: none;
}

.ak-alert-bar--rot a.ak-alert-bar__btn,
.ak-alert-bar--warnung a.ak-alert-bar__btn,
.ak-alert-bar--stoerung a.ak-alert-bar__btn,
.ak-alert-bar--behoben a.ak-alert-bar__btn {
  background: var(--bg-light);
  box-shadow: inset 0 0 0 1.5px var(--border-card);
  color: var(--text-on-light-primary);
}
.ak-alert-bar--rot a.ak-alert-bar__btn:hover,
.ak-alert-bar--rot a.ak-alert-bar__btn:focus-visible,
.ak-alert-bar--warnung a.ak-alert-bar__btn:hover,
.ak-alert-bar--warnung a.ak-alert-bar__btn:focus-visible,
.ak-alert-bar--stoerung a.ak-alert-bar__btn:hover,
.ak-alert-bar--stoerung a.ak-alert-bar__btn:focus-visible,
.ak-alert-bar--behoben a.ak-alert-bar__btn:hover,
.ak-alert-bar--behoben a.ak-alert-bar__btn:focus-visible {
  background: linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0.08)), linear-gradient(var(--bg-light), var(--bg-light));
  color: var(--text-on-light-primary);
}

/* Textlink mit Pfeil (DS Link) */
.ak-alert-bar a.ak-alert-bar__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--ak-ab-link);
  text-decoration: none;
}
.ak-alert-bar a.ak-alert-bar__link:hover,
.ak-alert-bar a.ak-alert-bar__link:focus-visible {
  color: var(--ak-ab-link);
  text-decoration: underline;
}
.ak-alert-bar__arrow { flex-shrink: 0; }

/* Schließen */
.ak-alert-bar button.ak-alert-bar__close {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--ak-ab-text);
  cursor: pointer;
}
.ak-alert-bar button.ak-alert-bar__close:hover {
  background: rgba(0,0,0,0.08);
}
.ak-alert-bar button.ak-alert-bar__close svg { display: block; }

/* POWER-Seiten: Der feste Header liegt über dem Hero. Der Balken steht ganz oben,
   der Header rückt um die sichtbare Balkenhöhe nach unten (Wert setzt module.html).
   !important nötig: POWER setzt .pwr-header-fixed { top: 0 !important } und top inline. */
html.ak-alert-aktiv .pwr-header-fixed {
  top: var(--ak-alert-unten, 0px) !important;
}

/* Mobil: Kennzeichnung und Text laufen als ein Absatz, Links darunter */
@media (max-width: 767px) {
  .ak-alert-bar__inner {
    padding: 8px 48px 8px var(--layout-gutter-mobile);
  }
  .ak-alert-bar__content {
    display: block;
    min-height: 0;
  }
  .ak-alert-bar__icon { display: none; }
  .ak-alert-bar__label {
    display: inline;
    margin-right: 8px;
  }
  .ak-alert-bar .ak-alert-bar__text,
  .ak-alert-bar .ak-alert-bar__text p { display: inline; }
  .ak-alert-bar__links { margin-top: 8px; }
  .ak-alert-bar button.ak-alert-bar__close {
    top: 4px;
    right: 8px;
    transform: none;
  }
}