/* ===========================================================
   Wegweiser zum passenden Rechner — unten rechts
   -----------------------------------------------------------
   EIGENES Stilblatt, nicht Teil von rechner.css. Grund: Das
   Skript rechner-hinweis.js läuft auf der ganzen Website, also
   auch im Blog und auf Seiten, die den Rechnerbaustein gar
   nicht kennen. Lag die Gestaltung in rechner.css, hing der
   Kasten dort unformatiert als normaler Block am Seitenende.
   Wer das Skript einbindet, bindet dieses Stilblatt mit ein.

   Datenschutzrechtlich bewusst anspruchslos gebaut: Er speichert
   NICHTS — kein Cookie, kein localStorage, kein sessionStorage.
   Damit greift § 25 TDDDG gar nicht erst, es braucht keine
   Einwilligung und keinen Eintrag in der Datenschutzerklärung.

   Der Preis dafür: Er erscheint bei jedem Seitenaufruf neu.
   Das ist vertretbar, weil er klein ist, unten rechts sitzt,
   nichts überdeckt und sich wegklicken lässt. Ein Merker wäre
   eine Komfortfunktion — und Komfort ist nach § 25 Abs. 2 Nr. 2
   TDDDG gerade nicht "unbedingt erforderlich".
   =========================================================== */

.hinweis-dialog {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  width: min(340px, calc(100vw - 40px));
  padding: 16px 18px 16px 20px;
  border: 1px solid var(--line, #E3E7E8);
  border-left: 3px solid var(--petrol, #0B7285);
  border-radius: var(--radius, 14px);
  background: #fff;
  box-shadow: var(--shadow-lg, 0 18px 48px rgba(11,114,133,.16));
  font-size: 13.5px; line-height: 1.55; color: var(--text-body, #707070);
}

/* Er startet unsichtbar und kommt erst, wenn der Besucher ein Stück
   gelesen hat — sonst ist er ein Banner statt eines Hinweises. */
.hinweis-dialog { opacity: 0; transform: translateY(12px); pointer-events: none; }
.hinweis-dialog.ist-da { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: no-preference) {
  .hinweis-dialog { transition: opacity .34s ease, transform .34s cubic-bezier(0, 0, .2, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .hinweis-dialog { transform: none; }
}
.hinweis-dialog[hidden] { display: none; }

/* --- Kopf: Icon und Titel nebeneinander ---
   Das Icon sagt vor dem Lesen, worum es geht. Es trägt die Sparte,
   damit der Kasten auf einem BU-Beitrag anders wirkt als auf einem
   Beitrag über Bestattungskosten. */
.hinweis-kopf {
  display: flex; gap: 11px; align-items: flex-start;
  margin: 0 0 8px; padding-right: 24px;
}
.hinweis-ic {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--soft, #F1F6F6); color: var(--petrol, #0B7285);
}
.hinweis-ic svg { width: 21px; height: 21px; }

.hinweis-dialog-titel {
  margin: 0; align-self: center;
  font-size: 14.5px; font-weight: 700; line-height: 1.3;
  color: var(--text, #222);
}
.hinweis-dialog p { margin: 0 0 10px; }
.hinweis-dialog p:last-of-type { margin-bottom: 0; }
.hinweis-dialog a { color: var(--petrol-accent, #0C7A8F); font-weight: 600; }

.hinweis-zu {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px;          /* klein, aber gross genug zum Tippen */
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent;
  color: #9ca3af; font-size: 17px; line-height: 1; cursor: pointer;
  transition: background .2s, color .2s;
}
.hinweis-zu:hover { background: var(--soft, #F1F6F6); color: var(--text, #222); }
.hinweis-zu:focus-visible { outline: 2px solid var(--petrol-accent, #0C7A8F); outline-offset: 2px; }

/* Knopf und Kleingedrucktes im Wegweiser */
.hinweis-knopf {
  display: inline-block; margin-top: 4px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--petrol, #0B7285); color: #fff;
  font-size: 13.5px; font-weight: 600; text-decoration: none;
  transition: background .2s ease;
}
.hinweis-knopf:hover { background: var(--petrol-dark, #085D6D); color: #fff; }
.hinweis-knopf:focus-visible { outline: 2px solid var(--petrol-dark, #085D6D); outline-offset: 2px; }

/* Der Satz, der sagt, was der Rechner NICHT ist. Kleiner gesetzt, aber
   nicht versteckt — er gehört zur Aussage, nicht ins Kleingedruckte. */
.hinweis-klein {
  font-size: 12.5px; line-height: 1.45; color: #9ca3af;
  padding-top: 8px; margin-top: 2px;
  border-top: 1px solid var(--line, #E3E7E8);
}

@media (max-width: 520px) {
  .hinweis-dialog { right: 12px; left: 12px; bottom: 12px; width: auto; }
}