/* =============================================================================
 * stenVal Consult — Seite „Seit 2004"
 *
 * Zwei Dinge, die es sonst nirgends gibt:
 *
 *   1 · das Erinnerungsbild — die kurze Überblendung vom alten Auftritt
 *       interim4Management auf das stenVal-Lockup. Sie wird ausschließlich
 *       von marke.js erzeugt, steht also NICHT im Quelltext. Ohne JavaScript
 *       sieht der Besucher sofort die Seite, und kein Suchprogramm bekommt
 *       eine blaue Fläche vor den Inhalt gelegt.
 *
 *   2 · das Markenband — die historische Wortmarke als Beleg. Bewusst
 *       gedämpft und klein: sie ist Nachweis, nicht Absender. Graustufig,
 *       damit auf der Seite nur ein einziges Markenblau steht, das von
 *       stenVal.
 * ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Erinnerungsbild

   Weißer Grund — so sah die Seite von 2004 aus. Blau war dort nur das
   schmale Kopfband, nicht die Fläche. Die Wortmarke steht zuerst mittig
   in ihren Originalfarben, rückt dann nach oben, das stenVal-Lockup
   erscheint darunter, zuletzt der Weg in die Seite.

   Zwei Zeiten sind einstellbar und kommen als Kennwerte von marke.js
   (aus marke.json, Pflege-Tool → Erinnerungsbild):

     --erinnerung-ruecken     Dauer der Aufwärtsbewegung
     --erinnerung-ausblenden  Dauer des Schlussausblendens

   Die Werte hinter dem Komma sind der Rückfall und müssen mit den
   Rückfallwerten in marke.js übereinstimmen. Die Ein- und Ausblenden
   innerhalb der Bewegung sind an --erinnerung-ruecken gerechnet, damit
   das Verhältnis stimmt, wenn die Bewegung schneller oder ruhiger wird.
   -------------------------------------------------------------------------- */
.erinnerung {
  position: fixed;
  inset: 0;
  z-index: 900;                       /* über dem Kopf (nav: 100) */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
  opacity: 1;
  transition: opacity var(--erinnerung-ausblenden, 0.6s) ease;
}
.erinnerung.is-ende { opacity: 0; pointer-events: none; }

/* Bühne: feste Fläche, auf der die drei Elemente absolut sitzen. Absolut,
   damit das Logo am Anfang wirklich in der Mitte steht und nicht von den
   noch unsichtbaren Elementen darunter nach oben gedrückt wird. */
.erinnerung__buehne {
  position: relative;
  width: min(88vw, 620px);
  height: min(74vh, 470px);
}
.erinnerung__alt,
.erinnerung__neu { position: absolute; left: 50%; top: 50%; }

/* Alter Auftritt ---------------------------------------------------------- */
.erinnerung__alt {
  width: min(66vw, 430px);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: transform var(--erinnerung-ruecken, 1.1s) cubic-bezier(0.4, 0, 0.2, 1);
}
.erinnerung.is-hoch .erinnerung__alt {
  transform: translate(-50%, calc(-50% - clamp(74px, 13vh, 118px)));
}

.erinnerung__marke { display: block; width: 100%; height: auto; }

/* Arial und das Grau der alten Seite (#3B4040) — beides aus ihrem
   Stylesheet ausgelesen. Ein fremder Webfont wird dafür nicht geladen. */
.erinnerung__claim,
.erinnerung__jahr {
  font-family: Arial, Helvetica, sans-serif;
  color: #3b4040;
  transition: opacity calc(var(--erinnerung-ruecken, 1.1s) * 0.64) ease;
}
.erinnerung__claim {
  margin: 22px 0 0;
  font-size: clamp(11px, 1.35vw, 13px);
  letter-spacing: 0.14em;
}
/* Die Zeile „…seit 2004“ mit dem Zeichen TLR Consult daneben. Auf der
   Altseite stand es unmittelbar an dieser Zeile – siehe deren Quelltext:
   logo_TLR2-300.jpg direkt vor dem zentrierten Absatz „...seit 2004“. */
.erinnerung__jahr {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.9vw, 18px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
}
/* Nach der Breite bemessen, nicht nach der Höhe: das Zeichen trägt den
   Schriftzug „TLR Consult“, und über die Höhe geregelt würde der zu klein,
   um noch lesbar zu sein. */
.erinnerung__signatur {
  display: block;
  width: clamp(112px, 17vw, 156px);
  height: auto;
}
.erinnerung.is-hoch .erinnerung__claim,
.erinnerung.is-hoch .erinnerung__jahr { opacity: 0; }

/* Neuer Auftritt ---------------------------------------------------------- */
.erinnerung__neu {
  width: min(60vw, 370px);
  transform: translate(-50%, clamp(14px, 3.5vh, 34px));
  opacity: 0;
  transition: opacity calc(var(--erinnerung-ruecken, 1.1s) * 0.9) ease
                      calc(var(--erinnerung-ruecken, 1.1s) * 0.3);
}
.erinnerung.is-hoch .erinnerung__neu { opacity: 1; }
.erinnerung__lockup { display: block; width: 100%; height: auto; }

/* Hinweiszeile im Klick-Betrieb: sagt, was der nächste Klick tut. Sie
   erscheint nur, solange die Betriebsart auf „klick" steht — marke.js hängt
   sie dann überhaupt erst ein. */
.erinnerung__hinweis {
  position: absolute;
  left: 50%;
  bottom: calc(80px + var(--safe-b));   /* über der größeren Tippfläche */
  transform: translateX(-50%);
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--consult);
  white-space: nowrap;
}

/* Überspringen: auf weißem Grund gedämpftes Graublau statt Weiß. */
.erinnerung__weg {
  position: absolute;
  left: 50%;
  bottom: calc(28px + var(--safe-b));
  transform: translateX(-50%);
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--consult);
  cursor: pointer;
  /* 12px statt 8px: darunter blieb die Tippfläche bei 37 px und damit unter
     dem Richtwert von 44 px (WCAG 2.5.5, Apple HIG). Am 19.08.2026 am
     iPhone-Maß nachgemessen. */
  padding: 12px 16px;
}
.erinnerung__weg:hover { text-decoration: underline; }

/* Wer Bewegung abbestellt hat, bekommt gar keine Sequenz – marke.js prüft
   das zusätzlich selbst. Diese Regel ist der Gurt zum Hosenträger. */
@media (prefers-reduced-motion: reduce) {
  .erinnerung { display: none; }
}

/* --------------------------------------------------------------------------
   3 · Heim-Knopf am Fuß

   Die Regeln für .btn--heim stehen seit dem 19.08.2026 in stenval.css: das
   Overlay zeigt diese Seite auch auf anderen Seiten, und dort ist marke.css
   nicht geladen – die Marke kam im Flyover in voller Bildgröße.
   -------------------------------------------------------------------------- */