/* ============================================================
   Bildpunkt im Hero

   Masse aus Prototyp.dc.html Zeile 1811 und 1820-1830.

   Farben: Der Punkt sitzt auf einem Foto, nicht auf einer Themeflaeche.
   Hell und Dunkel aendern daran nichts — deshalb die --on-media-Token und
   Petrol als Kartenflaeche, unabhaengig vom Schema.
   ============================================================ */

.ps-hero-punkt {
  position: absolute;
  left: var(--ps-punkt-x, 50%);
  top: var(--ps-punkt-y, 50%);
  pointer-events: auto;
}

/* ---------- Der Punkt ---------- */

.ps-hero-punkt__knopf {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--on-media-line);
  border-radius: 50%;
  background: rgb(5 25 31 / 55%);
  color: var(--on-media-strong);
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.ps-hero-punkt__knopf:hover,
.ps-hero-punkt__knopf:focus-visible {
  transform: translate(-50%, -50%) scale(1.12);
  background: var(--accent-base);
  border-color: var(--accent-base);
  color: var(--petrol-950);
}

.ps-hero-punkt[data-offen="true"] .ps-hero-punkt__knopf {
  background: var(--accent-base);
  border-color: var(--accent-base);
  color: var(--petrol-950);
}

/* Das Plus dreht sich zum Kreuz, sobald die Karte offen ist — dieselbe
   Schaltflaeche schliesst wieder, und das soll man ihr ansehen. */
.ps-hero-punkt__knopf .ps-icon {
  transition: transform var(--dur-base) var(--ease-out);
}
.ps-hero-punkt[data-offen="true"] .ps-hero-punkt__knopf .ps-icon {
  transform: rotate(45deg);
}

.ps-hero-punkt__ring {
  position: absolute;
  inset: -4px;
  border: 1px solid var(--accent-base);
  border-radius: 50%;
  animation: ps-ping 2.6s var(--ease-out) infinite;
  pointer-events: none;
}

/* Steht die Karte offen, hat der Ring seinen Zweck erfuellt. */
.ps-hero-punkt[data-offen="true"] .ps-hero-punkt__ring { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ps-hero-punkt__ring { animation: none; opacity: 0.5; }
}

/* ---------- Die Karte ---------- */

/*
   Die Karte oeffnet nach unten und liegt ueber dem Koerper — wie im
   Prototyp. Zwei Gruende sprechen dagegen, sie ueber den Punkt zu legen:
   Sie verdeckte dann das Gesicht, auf das der Punkt zeigt, und sie stiesse
   an die schwebende Kopfzeile.

   20px unter der Punktmitte heisst 3px unter der Unterkante des Knopfes.
   Die Luecke ist so klein, dass der Zeiger sie in einer Bewegung
   ueberquert — und die Bruecke weiter unten faengt auch das ab.
*/
.ps-hero-punkt__karte {
  position: absolute;
  left: 0;

  /*
     `right: auto` ist keine Zierde.

     Der Browser setzt fuer <dialog> von sich aus *beide* Inline-Kanten auf
     0. Zusammen mit `left: 0` und einer festen Breite ist der Kasten damit
     ueberbestimmt — und haengt am rechten Rand des Hero statt am Punkt.
     Sichtbar wurde das erst in Zwischengroessen: Die Karte klebte am
     Bildrand, und die Kippregel griff nie, weil sie ja "passte".
  */
  right: auto;
  top: 20px;
  z-index: 4;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--accent-base);
  border-radius: var(--radius-lg);
  background: rgb(5 25 31 / 92%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 32%);
  opacity: 0;
  /* --ps-punkt-schub setzt app.js, wenn die Karte sonst aus dem Bild
     ragen wuerde. Er steckt im transform, damit er nicht mit `left`
     kollidiert, das die Kippregeln unten setzen. */
  transform: translate(var(--ps-punkt-schub, 0), calc(var(--ps-punkt-schub-y, 0px) + 8px));
  transition:
    opacity 260ms var(--ease-out),
    transform 340ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
   Der Browser bringt fuer <dialog> eigene Stile mit: einen Rahmen, einen
   automatischen Aussenabstand, eine Begrenzung auf die Fensterbreite und
   eine eigene Textfarbe. Alles davon steht hier im Weg und wird
   zurueckgenommen — geschlossen bleibt der Dialog von sich aus unsichtbar,
   dafuer braucht es nichts.
*/
/* Im Editor ist die Karte ein gewoehnliches <div> — dort uebernimmt diese
   Regel, was der Browser beim <dialog> von sich aus tut. */
.editor-styles-wrapper .ps-hero-punkt:not([data-offen="true"]) .ps-hero-punkt__karte {
  display: none;
}

dialog.ps-hero-punkt__karte {
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-4);
  color: inherit;
  overflow: visible;
}

.ps-hero-punkt[data-offen="true"] .ps-hero-punkt__karte {
  opacity: 1;
  transform: translate(var(--ps-punkt-schub, 0), var(--ps-punkt-schub-y, 0));
}

/* Nahe am rechten Rand kippt die Karte nach links — sonst steht sie
   ausserhalb des Bildes. Das Attribut setzt app.js nach dem Messen. */
.ps-hero-punkt[data-seite="links"] .ps-hero-punkt__karte {
  left: auto;
  right: 0;
}

/* Ist unten kein Platz, klappt sie nach oben auf. */
.ps-hero-punkt[data-hoehe="oben"] .ps-hero-punkt__karte {
  top: auto;
  bottom: 20px;
  transform: translate(var(--ps-punkt-schub, 0), calc(var(--ps-punkt-schub-y, 0px) - 8px));
}
.ps-hero-punkt[data-hoehe="oben"][data-offen="true"] .ps-hero-punkt__karte {
  transform: translate(var(--ps-punkt-schub, 0), var(--ps-punkt-schub-y, 0));
}

/*
   Die Bruecke ueber die Luecke zwischen Knopf und Karte.

   Ohne sie verlaesst der Zeiger auf dem Weg vom Plus zur Karte kurz beide
   Flaechen, das Menue haelt das fuer "weg" und schliesst. Ein unsichtbarer
   Streifen, der beide verbindet, loest das, ohne dass irgendwo etwas zu
   sehen ist. Er zaehlt nur, solange die Karte offen ist.
*/
.ps-hero-punkt[data-offen="true"] .ps-hero-punkt__karte::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}

.ps-hero-punkt[data-hoehe="oben"][data-offen="true"] .ps-hero-punkt__karte::before {
  top: auto;
  bottom: -24px;
}

.ps-hero-punkt__zu {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--on-media-line);
  border-radius: 50%;
  background: transparent;
  color: var(--on-media);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ps-hero-punkt__zu:hover {
  color: var(--on-media-strong);
  border-color: var(--on-media-strong);
}

.ps-hero-punkt__person {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: var(--space-6); /* Platz fuer das Schliesskreuz */
}

.ps-hero-punkt__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--on-media-strong);
}

.ps-hero-punkt__rolle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-base);
}

.ps-hero-punkt__hinweis {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--on-media);
}

.ps-hero-punkt__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ps-hero-punkt__weg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--on-media-line);
  border-radius: 50%;
  color: var(--on-media-strong);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.ps-hero-punkt__weg:hover {
  border-color: var(--on-media-strong);
  background: rgb(255 255 255 / 12%);
  color: var(--on-media-strong);
}

.ps-hero-punkt__weg--stark {
  background: var(--on-media-strong);
  border-color: var(--on-media-strong);
  color: var(--petrol-900);
}

.ps-hero-punkt__weg--stark:hover {
  background: var(--accent-base);
  border-color: var(--accent-base);
  color: var(--petrol-950);
}

/* ---------- Schmale Breiten ----------
   Auf dem Handy sind 34px-Ziele in einem Foto kaum zu treffen, und drei
   offene Karten waeren ohnehin zu viel. Die Punkte bleiben, werden aber
   groesser; die Karte nimmt fast die volle Breite. */

/* ---------- Auf dem Telefon: eine Leiste von unten ----------

   Geoeffnet wird sie dort mit `showModal()`. Der Dialog liegt damit in der
   Top-Layer: ueber allem, unabhaengig von Stapelkontexten, Containment und
   transformierten Vorfahren. Genau daran war die Umsetzung vorher zweimal
   gescheitert — erst haftete sie am transformierten Punktekasten, dann am
   Fenster statt am Bild. In der Top-Layer stellt sich die Frage nicht mehr.

   `:modal` trifft nur, was mit `showModal()` geoeffnet wurde. Die Karte am
   Punkt auf breiten Bildschirmen bleibt davon unberuehrt — ein Selektor
   statt einer zweiten Umsetzung.

   Am unteren Rand des *Fensters* und nicht des Bildes: So sitzt sie auf
   jedem Telefon an derselben Stelle, egal wie gross es ist und wie hoch der
   Hero gerade ausfaellt. Der Daumen erreicht sie, ohne dass irgendetwas
   gerechnet werden muesste.
*/

.ps-hero-punkt__karte:modal {
  position: fixed;
  width: auto;
  background: var(--petrol-950);
  padding: var(--space-5);
  transform: none;

  /*
     Nicht randlos angeklebt, sondern eine schwebende Kachel mit Luft
     ringsum — sie liest sich als etwas, das obenauf liegt, und nicht als
     angewachsener Streifen.

     Der Abstand nach unten ist bewusst groesser: Ganz am Rand liegen die
     Knoepfe in der Zone, die Betriebssystem und Handhaltung fuer sich
     beanspruchen. `env(safe-area-inset-bottom)` kommt fuer die Gestenleiste
     randloser Telefone obendrauf.
  */
  inset:
    auto
    var(--space-4)
    calc(var(--space-7) + env(safe-area-inset-bottom, 0px))
    var(--space-4);
}

/*
   Die Kontaktknoepfe mittig und mit mehr Luft.

   Am linken Rand ist die E-Mail-Schaltflaeche fuer den Daumen der
   ungeschickteste Ort auf dem ganzen Bildschirm — mittig erreichen beide
   Haende sie gleich gut.
*/
.ps-hero-punkt__karte:modal .ps-hero-punkt__wege {
  justify-content: center;
  gap: var(--space-4);
  padding-top: var(--space-2);
}

.ps-hero-punkt__karte:modal .ps-hero-punkt__person,
.ps-hero-punkt__karte:modal .ps-hero-punkt__hinweis {
  text-align: center;
}

.ps-hero-punkt__karte:modal .ps-hero-punkt__person {
  align-items: center;
  padding-right: 0;
}

.ps-hero-punkt__karte:modal::backdrop {
  background: rgb(5 25 31 / 62%);
  backdrop-filter: blur(2px);
}

@media (max-width: 600px) {
  .ps-hero-punkt__knopf { width: 40px; height: 40px; }

  /* Beruehrungsziele: 44px sind das Mass, unter dem es fummelig wird. */
  .ps-hero-punkt__weg { width: 48px; height: 48px; }

  /* Keine Bruecke noetig — hier oeffnet ein Fingertipp, kein Zeiger, der
     unterwegs verloren gehen koennte. */
  .ps-hero-punkt[data-offen="true"] .ps-hero-punkt__karte::before { content: none; }

  /*
     Eigene Lage fuers Handy.

     Genau hier wird der Hero hochkant und der Textblock legt sich ueber den
     unteren Rand — derselbe Umschaltpunkt, an dem auch das Bild auf
     --ps-hero-x-mobil wechselt. Die Kette ist zweistufig: eigener Mobilwert,
     sonst der Desktopwert, sonst die Mitte. Wer nichts einstellt, merkt von
     dieser Regel nichts.
  */
  .ps-hero-punkt {
    left: var(--ps-punkt-x-mobil, var(--ps-punkt-x, 50%));
    top:  var(--ps-punkt-y-mobil, var(--ps-punkt-y, 50%));
  }

  .ps-hero-punkt--ohne-handy { display: none; }

  /*
     Im Editor bleibt der ausgeblendete Punkt sichtbar, nur zurueckgenommen.
     Waere er auch dort weg, koennte man ihn nicht mehr anwaehlen — und damit
     den Schalter nicht wieder umlegen.
  */
  .editor-styles-wrapper .ps-hero-punkt--ohne-handy {
    display: block;
    opacity: 0.4;
  }
}