/* Blatt der Landingpage (views/landing.ejs) — VOLLSTAENDIG und alleinstehend.
 *
 * Es bindet bewusst kein style.css ein. Zwei Gruende:
 *   1. style.css bringt --color-primary: #2563eb mit. Das ist ein Koenigsblau; das
 *      Laxxon-Logo traegt ein Cyan-Blau. Nebeneinander auf einer aufgeraeumten
 *      Flaeche sind das sichtbar zwei verschiedene Blaus. Der Owner hat am
 *      2026-08-24 entschieden: die Marke gewinnt -- aber NUR hier. Die 17 anderen
 *      Views behalten ihr Hausblau, damit diese Entscheidung keinen Sichttest der
 *      ganzen App nach sich zieht.
 *   2. style.css ist das Blatt einer angemeldeten Anwendung (Tabellen, Modale,
 *      Formulare, Kopfnavigation). Auf einer Seite mit einem Bild, einer
 *      Ueberschrift und zwei Knoepfen waeren davon ueber 95 % ungenutzte Bytes auf
 *      genau der Seite, die zuerst geladen wird.
 */

:root {
  /* 🔴 ZWEI Blaus, und der Unterschied ist gemessen, nicht Geschmack.
   *
   * --laxxon-logo ist die ECHTE Markenfarbe: am 2026-08-24 aus
   * public/img/laxxon-logo.png gezaehlt (haeufigste voll deckende Farbe, 16.391
   * Pixel). Sie steht hier als Beleg und wird fuer TEXT nicht verwendet.
   *
   * --laxxon ist die daraus abgeleitete Bedienfarbe. Sie ist dunkler, weil das
   * reine Markenblau BEIDE Schwellen reisst -- am gerenderten Bildschirmfoto
   * gemessen, nicht am Blatt geschaetzt:
   *
   *   Wortmarke auf dem Bildgrund (#bcc3c9 hinter dem Schleier):
   *     #0491be -> 2.03:1     #046d8c -> 3.30:1   (Grosstext braucht 3.00)
   *   Weisser Knopftext darauf:
   *     #0491be -> 3.62:1     #046d8c -> 5.88:1   (braucht 4.50)
   *
   * EINE abgeleitete Farbe und nicht zwei: sonst truege die Wortmarke ein anderes
   * Blau als der Knopf daneben -- und genau das zu vermeiden war der Anlass, dieses
   * Blatt ueberhaupt vom Hausblau zu trennen.
   *
   * ⚠️ Wer das Bild austauscht, macht die erste Messung ungueltig: der Grund hinter
   * der Wortmarke ist dann ein anderer. Das Vorgehen steht im Handoff vom 24.08. */
  --laxxon-logo: #0491be;
  --laxxon: #046d8c;
  --laxxon-dunkel: #035870;
  --text: #1c2b33;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body.landing {
  /* Der Grund liegt unter dem Bild und ist die Farbe der oberen linken Bildecke.
   * Er ist sichtbar, solange das Bild laedt -- ohne ihn stuende dort Weiss und die
   * Seite blitzte hell auf, bevor sie ihren Ton findet. Derselbe Gedanke wie beim
   * Anlaufvorhang des Eingangs, nur billiger: hier reicht eine Farbe. */
  background: #c9ced2;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;   /* eine Bildschirmseite, kein Scrollweg */
}

/* Das Bild. position:fixed statt absolute, damit es auf Telefonen beim Ein- und
 * Ausfahren der Adressleiste nicht springt. */
.grund {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der interessante Teil des Motivs (Laborzeile, Geraete) sitzt in der unteren
   * Bildhaelfte, die ruhige Wand oben. Auf einem hohen, schmalen Schirm schneidet
   * cover links und rechts weg; mit 'center' bliebe die Wand. 60 % schiebt den
   * Ausschnitt nach unten, sodass die Geraete im Bild bleiben und die Wand unter
   * der Kopfzeile trotzdem ausreicht. */
  object-position: center 60%;
  z-index: 0;
}

/* Heller Schleier am oberen Rand, damit die Kopfzeile auch ueber einem spaeteren,
 * unruhigeren Motiv lesbar bleibt. Er ist eine Zusicherung, keine Gestaltung.
 *
 * ⚠️ Als Zusicherung war er zunaechst zu schwach, und das ist erst beim Messen
 * aufgefallen: mit einem gleichmaessigen Verlauf ab 0.75 lag der Grund hinter der
 * Wortmarke bei #bcc3c9 -- hell genug fuers Auge, zu dunkel fuer die Schwelle.
 * Jetzt drei Haltepunkte: oben fast deckend, wo die Kopfzeile steht, und erst
 * darunter der lange Ausklang. Der Ausklang ist der Grund, warum das nicht als
 * weisser Balken liest. */
.schleier {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 260px;
  background: linear-gradient(to bottom,
    rgba(255,255,255,0.92) 0,
    rgba(255,255,255,0.80) 96px,
    rgba(255,255,255,0) 100%);
  z-index: 1;
  pointer-events: none;   /* sonst verschluckt er die Knoepfe darunter */
}

.kopf {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem 2.25rem;
}

.marke {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
}

/* Die zweite Silbe im Markenblau -- dieselbe Trennung wie im Eingang
   (public/css/scrollwelt.css, .brand span) und in der Kopfleiste der Welten. Sie
   Sie traegt --laxxon und NICHT --laxxon-logo: siehe die Messung oben. */
.marke span { color: var(--laxxon); }

/* Sobald public/img/laxxon-logo.svg vorliegt und der Schriftzug in landing.ejs
 * durch das <img> ersetzt wird, greift diese Regel. Sie steht schon hier, damit
 * der Tausch eine reine Markup-Aenderung bleibt. max-width, weil ein Logo mit
 * Bild- UND Wortmarke breit ist und auf einem Telefon sonst die halbe Zeile frisst. */
.marke img {
  display: block;
  height: 2.4rem;
  width: auto;
  max-width: 46vw;
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.kopf-aktionen form { margin: 0; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height 44px: die Zielgroesse, unter der ein Finger daneben trifft
   * (WCAG 2.5.8). Auf einer Seite mit genau zwei Bedienelementen gibt es keinen
   * Grund, darunter zu bleiben. */
  min-height: 44px;
  padding: 0.6rem 1.35rem;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
}

.knopf:active { transform: scale(0.98); }

/* Sichtbarer Fokusring, und zwar in der Markenfarbe mit weissem Trennabstand:
 * ueber einem Foto ist ein einfarbiger Ring je nach Bildstelle unsichtbar. Der
 * weisse Zwischenraum garantiert den Kontrast unabhaengig vom Motiv. */
.knopf:focus-visible {
  outline: 3px solid var(--laxxon);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff;
}

.knopf-leise {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(28, 43, 51, 0.18);
}
.knopf-leise:hover { background: #fff; }

.knopf-marke {
  background: var(--laxxon);
  color: #fff;
}
.knopf-marke:hover { background: var(--laxxon-dunkel); }

/* Die Rechtsverweise. Unten links, klein und zurueckhaltend -- sie sind Pflicht,
 * aber nicht die Aussage der Seite. position:fixed, weil der Body keine Hoehe
 * aufbaut (die Seite ist eine Bildschirmseite ohne Scrollweg). */
.fuss {
  position: fixed;
  left: 2.25rem;
  bottom: 1.5rem;
  z-index: 2;
  font-size: 0.8rem;
  color: var(--text);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}
.fuss a { color: var(--text); text-decoration: underline; }
.fuss a:hover { color: var(--laxxon-dunkel); }

@media (max-width: 560px) {
  .kopf { padding: 1.1rem 1.1rem; gap: 0.75rem; }
  .marke { font-size: 1.35rem; }
  .marke img { height: 1.9rem; }
  .knopf { padding: 0.55rem 1rem; font-size: 0.9rem; }
  .fuss { left: 1.1rem; right: 1.1rem; bottom: 1.1rem; }
}