/* =====================================================================
   Situative Hinweise („Tipps zur Bedienung", js/hinweise.js, 14.09.2026)
   docs/HINWEISE-2026-09-14.md

   Eine kleine Karte neben dem markierten Bedienelement, ein Ring über
   dem Element — und KEIN Schild: Die Seite bleibt bedienbar, der Tipp
   ist ein Zettel, keine Tür (der Unterschied zur Tour). Nur --pp-Tokens,
   damit beide Themes stimmen; die Farben tragen ≥ 4,5 : 1 (gemessen in
   docs/abnahme/hinweise/BERICHT.md).

   z-Index: über der Kopfzeile und dem Geo-Vollbild (136), UNTER jedem
   Portal-Dialog (.pp-modal-bg steht auf 150) — öffnet sich ein Fenster,
   während die Karte steht, deckt dessen Blende sie ab: Die bestehenden
   Mechaniken gewinnen auch optisch.
   ===================================================================== */
.pp-hinweis { position: fixed; inset: 0; z-index: 145; pointer-events: none; }

/* Der Ring — nur Rahmen, keine Abdunklung. */
.pp-hw-spot {
  position: fixed; pointer-events: none; border-radius: 10px;
  outline: 2px solid var(--pp-accent);
  box-shadow: 0 0 0 4px var(--pp-accent-tint);
}
.pp-hw-spot[hidden] { display: none; }

/* Die Karte. */
.pp-hw-card {
  position: fixed; width: 320px; max-width: calc(100vw - 24px);
  box-sizing: border-box;
  background: var(--pp-surface); color: var(--pp-text);
  border: 1px solid var(--pp-line-2); border-radius: 12px;
  box-shadow: var(--pp-lift);
  padding: var(--pp-sp-4, 16px) var(--pp-sp-4, 16px) var(--pp-sp-3, 12px);
  pointer-events: auto;
  font-family: var(--pp-sans);
}
/* Ohne Ziel (das Element ist gerade nicht im Bild oder nicht auf dieser
   Ansicht): oben rechts, unter der Kopfzeile. */
.pp-hw-card.ohne-ziel { top: 64px; right: 16px; left: auto; }

.pp-hw-zu {
  position: absolute; top: 6px; right: 6px;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--pp-text-2);
  font: 22px/1 var(--pp-sans); cursor: pointer;
}
.pp-hw-zu:hover { background: var(--pp-surface-2); color: var(--pp-text); }
.pp-hw-zu:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 1px; }

.pp-hw-eyebrow {
  font-family: var(--pp-ui, var(--pp-sans)); font-size: var(--pp-fs-mini, 11px);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pp-accent-2);
}
.pp-hw-titel {
  margin: 4px 28px 0 0; font-size: var(--pp-fs-h3, 16px); font-weight: 600;
  line-height: var(--pp-lh-knapp, 1.3); color: var(--pp-text);
}
.pp-hw-satz {
  margin: 6px 0 0; font-size: var(--pp-fs-text, 14px);
  line-height: var(--pp-lh-text, 1.5); color: var(--pp-text-2);
}
.pp-hw-fuss { display: flex; justify-content: flex-end; margin-top: var(--pp-sp-3, 12px); }
.pp-hw-fuss .pp-btn { min-height: 36px; }

/* Einblenden — nur unter dem Animationsschalter (Klasse pp-anim am body,
   docs/ANIMATIONEN.md), und prefers-reduced-motion gewinnt immer. */
@keyframes pp-hw-auf { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pp-hw-ring { from { box-shadow: 0 0 0 14px transparent; } to { box-shadow: 0 0 0 4px var(--pp-accent-tint); } }
.pp-hw-ein .pp-hw-card { animation: pp-hw-auf .22s ease-out; }
.pp-hw-ein .pp-hw-spot { animation: pp-hw-ring .5s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .pp-hw-ein .pp-hw-card, .pp-hw-ein .pp-hw-spot { animation: none; }
}

/* Telefon: ein Streifen am unteren Rand statt einer schwebenden Karte —
   dort gibt es keinen Platz „neben" einem Element (Muster der Fenster-
   Lagen: mobil keine schwebenden Fenster). Der Ring bleibt. `!important`,
   weil die Karte am Laptop ihre Lage als Inline-Stil trägt; auf dem
   Telefon setzt js/hinweise.js keinen — die Regel hier steht trotzdem
   gegen einen Stil, der aus einem Fensterwechsel übrig geblieben ist. */
@media (max-width: 860px) {
  .pp-hw-card, .pp-hw-card.ohne-ziel {
    top: auto !important; left: 8px !important; right: 8px !important; bottom: 8px !important;
    width: auto !important; max-width: none;
  }
  /* Steht das Ziel unten im Bild (der Chat-Fuß mit dem RWTHgpt-Knopf),
     wandert der Streifen nach oben, statt sein eigenes Ziel zu verdecken
     — js/hinweise.js setzt die Klasse, gemessen am Zielrechteck. */
  .pp-hw-card.oben { top: 8px !important; bottom: auto !important; }
  .pp-hw-zu { width: 44px; height: 44px; top: 2px; right: 2px; }
  .pp-hw-fuss .pp-btn { min-height: 44px; }
}
@media (hover: none) {
  .pp-hw-zu { width: 44px; height: 44px; top: 2px; right: 2px; }
  .pp-hw-fuss .pp-btn { min-height: 44px; }
}