/* ---------- Hinweisfenster „Post von Bertha“ (post-hinweis.html, post-hinweis.js) ----------
   Kleine Karte unten rechts, am Handy unten über die Breite, nie bildschirmfüllend.
   Kater Kolo lugt über den oberen Rand. Übernimmt Farben und Schriften aus style.css, wenn vorhanden,
   bringt aber Ersatzwerte mit und funktioniert so auch auf der Bus-Startseite. Nach style.css laden. */

/* <dialog>: Vorgaben des Browsers (Mitte, Rahmen, weißer Grund) zurücksetzen */
.post-hinweis {
  position: fixed;
  inset: auto max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) auto;
  z-index: 90;
  margin: 0;
  border: 0;
  padding: 70px 0 0; /* oben Platz für Kolo über der Karte */
  width: min(24rem, calc(100vw - 32px));
  max-width: none;
  max-height: none;
  overflow: visible;
  background: transparent;
  color: inherit;
  font-family: var(--font-sans, "Nunito", "Segoe UI", system-ui, sans-serif);
  line-height: 1.6;
  pointer-events: none; /* nur Karte und Knöpfe fangen Klicks, nicht der Rand um Kolo */
}
.post-hinweis:not([open]) { display: none; }
.post-hinweis:focus { outline: none; }
/* Rahmen innen, sonst läge Kaminlicht auf Creme (zu wenig Kontrast) */
.post-hinweis:focus-visible .post-hinweis__karte { outline: 3px solid var(--kaminlicht, #EE9A45); outline-offset: -4px; }

.post-hinweis__kolo {
  position: absolute;
  top: 0;
  left: 1rem;
  display: block;
  width: 116px;
  max-width: none;
  height: auto;
  z-index: 0; /* hinter der Karte: das Kinn verschwindet hinter der Kante */
}

.post-hinweis__karte {
  pointer-events: auto;
  position: relative;
  z-index: 1;
  max-height: calc(100vh - 76px);
  max-height: calc(100dvh - 76px); /* iOS: sichtbare statt große Ansicht */
  overflow-y: auto;
  padding: 1.15rem 1.25rem 0.85rem;
  background: var(--nachtblau, #1A2A44);
  color: var(--creme, #FCF6E7);
  border: 1px solid rgba(252, 246, 231, 0.14);
  border-radius: var(--radius, 14px);
  box-shadow: 0 18px 50px rgba(17, 28, 48, 0.38);
  --focus: var(--kaminlicht, #EE9A45);
}
@media (prefers-color-scheme: dark) {
  .post-hinweis__karte { background: #22324F; border-color: rgba(252, 246, 231, 0.2); }
}

.post-hinweis__eyebrow {
  margin: 0 2.5rem 0.35rem 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kaminlicht, #EE9A45);
}
.post-hinweis__titel {
  margin: 0 2rem 0.45rem 0;
  font-family: var(--font-serif, "Fraunces", Georgia, serif);
  font-weight: 600;
  line-height: 1.2;
  font-size: 1.32rem;
  color: var(--creme, #FCF6E7);
}
.post-hinweis__text {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(252, 246, 231, 0.88);
}

.post-hinweis__form { margin: 0; }
.post-hinweis__zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.post-hinweis__feld {
  flex: 1 1 11rem;
  min-width: 0;
  font: inherit;
  font-size: 1rem; /* ab 16 px zoomt iOS beim Antippen nicht */
  padding: 0.7rem 1rem;
  border: 2px solid rgba(252, 246, 231, 0.45); /* ab 3:1 für Bedienelemente */
  border-radius: 999px;
  background: rgba(252, 246, 231, 0.08);
  color: var(--creme, #FCF6E7);
}
.post-hinweis__feld::placeholder { color: rgba(252, 246, 231, 0.72); } /* ab 4,5:1 */
.post-hinweis__feld:focus-visible { outline: 3px solid var(--kaminlicht, #EE9A45); outline-offset: 2px; border-color: var(--kaminlicht, #EE9A45); }
/* Knopf und unsichtbares Label eigenständig, damit die Karte auch auf Seiten ohne style.css (Bus) funktioniert */
.post-hinweis .button {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-weight: 800;
  padding: 0.7rem 1.2rem;
  border: 2px solid var(--kaminlicht, #EE9A45);
  border-radius: 999px;
  background: var(--kaminlicht, #EE9A45);
  color: var(--nachtblau, #1A2A44);
  cursor: pointer;
  transition: background 0.15s ease;
}
.post-hinweis .button:hover { background: #F4B062; }
.post-hinweis .button:focus-visible { outline: 3px solid var(--kaminlicht, #EE9A45); outline-offset: 3px; }
/* Während des Sendens (post-anmeldung.js setzt aria-disabled statt disabled, damit der Fokus bleibt) */
[data-post-anmeldung] .button[aria-disabled="true"] { opacity: 0.6; cursor: progress; transform: none; }
.post-hinweis .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.post-hinweis__klein {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: rgba(252, 246, 231, 0.75);
}
.post-hinweis__klein a,
.post-hinweis .post-anmeldung__meldung a { color: var(--kaminlicht, #EE9A45); }

.post-hinweis__zu {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(252, 246, 231, 0.8);
  cursor: pointer;
}
.post-hinweis__zu:hover { background: rgba(252, 246, 231, 0.1); color: var(--creme, #FCF6E7); }
.post-hinweis__spaeter {
  display: inline-block;
  margin: 0.35rem 0 0 -0.4rem;
  padding: 0.4rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  color: rgba(252, 246, 231, 0.75);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.post-hinweis__spaeter:hover { color: var(--creme, #FCF6E7); }
.post-hinweis__zu:focus-visible,
.post-hinweis__spaeter:focus-visible { outline: 3px solid var(--kaminlicht, #EE9A45); outline-offset: 2px; }

/* Rückmeldung beim Absenden (post-anmeldung.js), gilt für alle Anmeldeformulare */
.post-anmeldung__meldung { margin: 0.6rem 0 0; font-size: 0.9rem; font-weight: 700; }
.post-anmeldung__meldung:empty { margin: 0; } /* bleibt leer im DOM, damit Screenreader die Meldung ansagen */
.post-anmeldung__falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Am Handy: unten über die Breite, kompakt (ohne Eyebrow und Fließtext, Feld und Knopf in einer Zeile).
   Name, Zweck und Häufigkeit stehen dann nur noch in der Hinweiszeile .post-hinweis__klein: nie ausblenden. */
@media (max-width: 520px) {
  .post-hinweis {
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    padding-top: 38px;
  }
  .post-hinweis__kolo { width: 64px; left: 0.75rem; }
  .post-hinweis__karte { padding: 0.85rem 0.9rem 0.5rem; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
  .post-hinweis__eyebrow,
  .post-hinweis__text { display: none; }
  .post-hinweis__titel { font-size: 1.1rem; margin-bottom: 0.55rem; }
  .post-hinweis__feld { flex: 1 1 7rem; padding: 0.65rem 0.85rem; }
  .post-hinweis .button { flex: 0 0 auto; padding: 0.65rem 0.95rem; }
  .post-hinweis__klein { font-size: 0.74rem; line-height: 1.4; margin-top: 0.45rem; }
  .post-hinweis__spaeter { margin-top: 0.15rem; }
}
/* Niedrige Fenster (Handy quer): ohne Kolo und Fließtext, die Hinweiszeile bleibt */
@media (max-height: 480px) {
  .post-hinweis { padding-top: 0; }
  .post-hinweis__kolo,
  .post-hinweis__text { display: none; }
}

/* Auftritt: Karte gleitet hoch, Kolo lugt danach über die Kante */
.post-hinweis__karte,
.post-hinweis__kolo {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-hinweis__kolo { transform: translateY(72px); }
.post-hinweis--offen .post-hinweis__karte,
.post-hinweis--offen .post-hinweis__kolo { opacity: 1; transform: none; }
.post-hinweis--offen .post-hinweis__kolo { transition-delay: 0.25s; } /* nur beim Öffnen verzögert */
/* Beim Ausblenden sofort nicht mehr klickbar, auch wenn die Karte noch sichtbar verblasst */
.post-hinweis:not(.post-hinweis--offen) .post-hinweis__karte { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .post-hinweis__karte,
  .post-hinweis__kolo { transform: none; transition: opacity 0.01s; transition-delay: 0s; }
}