/*
 * Sprechblasen — der gemeinsame Baustein für Hinweise und Touren.
 *
 * Drei Einsätze teilen ihn: die Startseite hängt zwei Blasen an die
 * Navigation, Dashboard und FAQ führen Piloten beim ersten Besuch durch ihre
 * wichtigsten Stellen. Ein zweiter Blasen-Stil wäre die Gelegenheit, bei der
 * sie auseinanderlaufen.
 *
 * **Weggeklickt heisst weg.** Der Zustand liegt im `localStorage`, nicht in
 * der Sitzung: wer einen Hinweis gelesen hat, soll ihn beim nächsten Besuch
 * nicht wieder wegklicken müssen. Die Logik dazu steht in `hinweis.js`.
 *
 * Zwei Töne, damit zwei Hinweise nebeneinander nicht wie ein Doppel wirken:
 *   .ist-navy  ruhig, für Auskünfte und die Tour
 *   .ist-gelb  Ankündigung — der Akzent gehört genau einer Sache (Brandbook)
 */

.lhv-blase {
  position: absolute;
  z-index: 95;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 268px;
  padding: 10px 10px 10px 15px;
  border-radius: 14px;
  background: #00235F;
  color: #fff;
  font: 400 13px/1.4 'LHV Text', 'Segoe UI', Arial, sans-serif;
  box-shadow: 0 12px 28px rgba(0, 35, 95, .3);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-6px);
  animation: lhvBlaseAuf .42s cubic-bezier(.2, .8, .2, 1) var(--blase-verzug, 0s) forwards;
}

/*
 * Der Zipfel zeigt auf den Anker. Seine Position ist eine **Variable**, keine
 * feste Kante: Blasen weichen einander seitlich aus, wenn zwei Anker dicht
 * beieinander liegen — der Zipfel muss trotzdem auf seinen Punkt zeigen.
 * Er sitzt am selben Element, damit er beim Wippen mitgeht.
 */
.lhv-blase::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--zipfel-x, 22px);
  width: 12px;
  height: 12px;
  background: inherit;
  border-radius: 3px;
  transform: rotate(45deg);
}

/* Anker unterhalb der Blase: der Zipfel wandert nach unten. */
.lhv-blase.ist-unten::before { top: auto; bottom: -6px; }

/*
 * Anker links daneben — der Fall der Seitenleiste. Unter dem Punkt haette die
 * Blase auf der dunklen Leiste gelegen: navy auf navy, und der Zipfel zeigte
 * ins Leere, weil die Blase nach rechts ausweichen muss.
 */
.lhv-blase.ist-rechts::before { top: var(--zipfel-y, 22px); left: -6px; }

.lhv-blase.ist-gelb {
  background: #FFAD00;
  color: #05164D;
  box-shadow: 0 12px 28px rgba(255, 173, 0, .34);
}

/*
 * Weiss auf Navy — der Ton für Blasen, die auf dunklem Grund stehen.
 *
 * Der Anlass war handfest: die Hinweise der Startseite hängen unter der
 * Kopfzeile und damit auf dem **dunkelblauen** Hero. Eine navyfarbene Blase
 * lag dort Farbe auf Farbe und war nur am Schatten zu erahnen. Wer einen Ton
 * wählt, prüft den Grund, auf dem er landet — nicht den, auf dem er entstand.
 */
.lhv-blase.ist-hell {
  background: #fff;
  color: #0F1B33;
  box-shadow: 0 14px 30px rgba(4, 16, 52, .38);
}
.lhv-blase.ist-hell .lhv-blase-zu { background: rgba(15, 27, 51, .1); color: #0F1B33; }
.lhv-blase.ist-hell .lhv-blase-zu:hover { background: rgba(15, 27, 51, .2); }
.lhv-blase.ist-hell b { color: #00235F; }

.lhv-blase b {
  font-family: 'LHV Head', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
}

.lhv-blase a {
  color: inherit;
  font-family: 'LHV Head', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lhv-blase-text { display: block; }
.lhv-blase-text small { display: block; margin-top: 3px; opacity: .82; font-size: 12px; }

.lhv-blase-zu {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: inherit;
  font: 400 13px/1 'LHV Text', 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
}
.lhv-blase.ist-gelb .lhv-blase-zu { background: rgba(5, 22, 77, .16); }
.lhv-blase-zu:hover { background: rgba(255, 255, 255, .32); }
.lhv-blase.ist-gelb .lhv-blase-zu:hover { background: rgba(5, 22, 77, .28); }

/* --- Tour: dieselbe Blase mit Schrittzähler und Knöpfen ----------------- */

/*
 * Die Tour: gelb, ohne Kontur, mit Schlagschatten (Betreiber-Wunsch).
 *
 * Der Schatten ist hier **nicht** Zierde, sondern das, was die Blase vom Grund
 * trennt: sie steht dort, wo ihr Anker steht, und der Untergrund wechselt
 * dabei vom dunkelblauen Briefing-Kopf zu hellem Grau. Deshalb zwei Lagen —
 * ein enger, dunkler Saum direkt an der Kante (er zeichnet die Form auch auf
 * hellem Grund nach) und ein weiter, weicher darunter (er hebt sie ab).
 */
.lhv-blase.ist-tour {
  max-width: 300px;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(4, 16, 52, .5), 0 18px 40px rgba(4, 16, 52, .48);
}
/* Der Knopf kann nicht gelb auf gelb sein — auf der gelben Blase traegt Navy. */
.lhv-blase.ist-gelb .lhv-blase-knopf { background: #00235F; color: #fff; }
.lhv-blase.ist-gelb .lhv-blase-knopf:hover { background: #05164D; }
.lhv-blase.ist-gelb .lhv-blase-schritt { opacity: .78; }
.lhv-blase-schritt {
  font: 700 10px 'LHV Head', 'Segoe UI', Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .68;
}
.lhv-blase-fuss { display: flex; align-items: center; gap: 10px; width: 100%; }
.lhv-blase-knopf {
  margin-left: auto;
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: #FFAD00;
  color: #05164D;
  font: 700 12.5px 'LHV Head', 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
}
.lhv-blase-knopf:hover { background: #FFBD32; }
.lhv-blase-leise {
  padding: 7px 4px;
  border: 0;
  background: none;
  color: inherit;
  font: 400 12.5px 'LHV Text', 'Segoe UI', Arial, sans-serif;
  opacity: .72;
  cursor: pointer;
}
.lhv-blase-leise:hover { opacity: 1; text-decoration: underline; }

/*
 * Der Anker der Tour wird hervorgehoben — sonst zeigt die Blase auf etwas,
 * das aussieht wie alles andere. Ein Ring, kein Scheinwerfer: die Seite bleibt
 * bedienbar, und nichts wird verdeckt.
 */
.lhv-tour-anker {
  position: relative;
  z-index: 94;
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(255, 173, 0, .9), 0 0 0 9px rgba(255, 173, 0, .22);
}

/* --- Bewegung ---------------------------------------------------------- */

/* Das Wippen beginnt erst, wenn die Blase steht — sonst überlagern sich
   Auftritt und Ruhebewegung, und es sieht nach Zittern aus. */
.lhv-blase.ist-da { opacity: 1; transform: none; animation: lhvBlaseWippen 3.4s ease-in-out infinite; }
.lhv-blase.ist-tour.ist-da { animation: none; }
.lhv-blase.ist-weg { animation: lhvBlaseZu .26s ease forwards; pointer-events: none; }

@keyframes lhvBlaseAuf { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lhvBlaseWippen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes lhvBlaseZu { to { opacity: 0; transform: translateY(-4px) scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  /* Ohne Bewegung bleibt die Aussage vollständig — die Blase steht einfach da. */
  .lhv-blase, .lhv-blase.ist-da { animation: none; opacity: 1; transform: none; }
  .lhv-blase.ist-weg { animation: none; display: none; }
}