/* ==========================================================================
   entwurf.css — Designentwurf-Modus
   Venier Immobilienbetreuung

   Wird von der ECHTEN Website nie geladen. Nur der Entwurfs-Build haengt
   diese Datei ein (bin/entwurf-bauen.mjs).

   Gestaltet in der Formensprache des Projekts: dunkler Grund, Versalien
   im Label-Grad, 2px Radius, kein Schatten, kein Verlauf. Das Abzeichen
   soll erkennbar sein, ohne die Gestaltung zu stoeren, die es
   kennzeichnet — ein Aufkleber, kein Bauteil.

   Alle Werte kommen aus tokens.css. Diese Datei fuehrt keine eigenen
   Farben und keine eigenen Abstaende ein.
   ========================================================================== */


/* --- Abzeichen -------------------------------------------------------------
   Unten links, ausserhalb des Leseflusses. pointer-events: none, damit es
   nie einen Verweis oder Knopf darunter blockiert — es ist eine Auf-
   schrift, kein Bedienelement. */

.entwurf-abzeichen {
  position: fixed;
  bottom: var(--raum-3);
  left: var(--raum-3);
  z-index: var(--z-anrufen);

  padding: var(--raum-1) var(--raum-2);
  background: var(--tiefe);
  color: var(--auf-tiefe);
  border-radius: var(--radius);

  font-family: var(--schrift-label);
  font-size: var(--gr-12);
  font-weight: var(--fett-label);
  letter-spacing: var(--lauf-label);
  text-transform: uppercase;
  line-height: 1;

  pointer-events: none;
  user-select: none;
}


/* --- Hinweis ---------------------------------------------------------------
   Erscheint nur, wenn jemand etwas Stillgelegtes antippt. Unten mittig,
   weil er sich auf die gerade ausgefuehrte Handlung bezieht und nicht auf
   eine Stelle der Seite.

   max-width in ch statt in Pixeln: Der Text ist eine Erklaerung und soll
   in derselben Satzbreite laufen wie der uebrige Fliesstext. */

.entwurf-hinweis {
  position: fixed;
  bottom: var(--raum-3);
  left: 50%;
  transform: translateX(-50%) translateY(0.5rem);
  z-index: var(--z-menue);

  max-width: min(38ch, calc(100vw - var(--raum-5)));
  padding: var(--raum-2) var(--raum-3);
  background: var(--tiefe);
  color: var(--auf-tiefe);
  border-radius: var(--radius);

  font-family: var(--schrift-text);
  font-size: var(--gr-14);
  line-height: var(--zeile-dicht);
  text-align: center;
  text-wrap: pretty;

  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dauer-kurz) var(--kurve-aus),
              transform var(--dauer-kurz) var(--kurve-aus);
}

.entwurf-hinweis.ist-da {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* --- Handyansicht ----------------------------------------------------------
   Am Handy steht unten der feste Anruf-Balken: 48 Pixel hoch, 20 Pixel
   ueber dem Rand, also bis 68 Pixel hinauf. Abzeichen und Hinweis ruecken
   darueber, statt sich damit zu ueberlagern.

   Der Balken selbst ist ab 48rem ausgeblendet — deshalb gilt das hier
   und nicht umgekehrt. */

@media (max-width: 47.99rem) {
  .entwurf-abzeichen { bottom: calc(var(--raum-3) + 3.5rem); }
  .entwurf-hinweis   { bottom: calc(var(--raum-3) + 3.5rem); }

  /* Sobald der Hinweis erscheint, wuerde er das Abzeichen ueberdecken —
     am Handy ist unten schlicht kein Platz fuer beides nebeneinander.
     Das Abzeichen tritt so lange zurueck. */
  .entwurf-hinweis.ist-da ~ .entwurf-abzeichen,
  .ist-entwurf:has(.entwurf-hinweis.ist-da) .entwurf-abzeichen { opacity: 0; }
}

.entwurf-abzeichen { transition: opacity var(--dauer-kurz) var(--kurve-aus); }


/* --- Menue offen -----------------------------------------------------------
   Das Menue nimmt den ganzen Bildschirm ein. Ein Abzeichen, das darueber
   schwebt, waere dort nur Stoerung — genauso wie der Anruf-Balken, der
   an derselben Stelle ausgeblendet wird. */

body[data-menue='offen'] .entwurf-abzeichen { display: none; }


/* --- Reduzierte Bewegung ---------------------------------------------------
   Der Hinweis erscheint dann ohne Versatz. Er bleibt sichtbar — die
   Sichtbarkeit haengt an .ist-da, nicht an der Bewegung. */

@media (prefers-reduced-motion: reduce) {
  .entwurf-hinweis          { transform: translateX(-50%); }
  .entwurf-hinweis.ist-da   { transform: translateX(-50%); }
}