/*
 * Der grosse Willkommen-Sticker — einmal je Pilot.
 *
 * Dasselbe Stueck Papier wie der kleine Sticker im Hero der Startseite
 * (`assets/welcome-sticker.js`), nur gross und mit einem anderen Auftrag: der
 * kleine wechselt taeglich sein Motiv, dieser hier faellt beim ersten Betreten
 * des neuen Dashboards herunter, wird von Hand beschrieben und ist danach fuer
 * immer weg. Die Logik dazu steht in `willkommen-gross.js`.
 *
 * **Er sieht aus wie der kleine, und das ist keine Anlehnung, sondern eine
 * Bedingung.** Wer sie nebeneinander sieht, soll dieselbe Marke erkennen.
 * Uebernommen ist deshalb alles, was den kleinen ausmacht:
 *
 *   Grund      #F4A800, scharfe Ecken, der Lichtstreifen quer darueber
 *   Kranich    weiss, oben links (`.ws-crane`)
 *   Tinte      #171717 — Handschrift UND Kritzeleien, sonst nichts
 *   Weiss      der zweite Ton: Kranich, Marke, Knopf
 *   Fuss       2 px Trennlinie in rgba(0,0,0,.15), darunter Weiss in LHV Head
 *
 * Was hier dazukommt, kommt aus der Groesse: der Zettel haengt vor der
 * Oberflaeche statt darin (er braucht einen eigenen Grund, sonst hat er keine
 * Kante), und weil seine Zeilen `nowrap` laufen und nicht umbrechen koennen,
 * skaliert `willkommen-gross.js` die ganze Karte ueber `--wgr-mass` ins
 * Fenster — derselbe Weg wie `--ws-scale` im Hero.
 */

/* Die Handschriften. Das Dashboard laedt sie sonst nicht — es kennt nur LHV
   Head und LHV Text. url() steht relativ zu DIESER Datei, also ohne /assets. */
@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-Latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-LatinExt.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Permanent Marker'; src: url('fonts/PermanentMarker-Latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

/* --- Buehne ------------------------------------------------------------- */

.wgr-buehne {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 20px;
  /* Der Grund ist dunkel genug, dass die gelbe Karte traegt, und hell genug,
     dass man das Dashboard dahinter noch erkennt: es ist ja das, worum es in
     der Nachricht geht. */
  background: rgba(4, 16, 52, .74);
  opacity: 0;
  transition: opacity .38s ease;
  /* Kurzform vor Langform, Standardform zuletzt — sonst schluckt der eine
     Prefix in Safari die ganze Regel und die Unschaerfe bleibt aus. */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.wgr-buehne.ist-da { opacity: 1; }
.wgr-buehne.ist-weg { opacity: 0; }

/* --- Der Fall ----------------------------------------------------------- */

/*
 * Zwei Ebenen, und das ist Absicht: `.wgr-fall` faellt, `.wgr-karte`
 * skaliert. Beides an einem Element hiesse, den Massstab in jedes Bild der
 * Fall-Animation mitzuschreiben — und fuer jede Fenstergroesse eine andere
 * Animation zu brauchen.
 *
 * Gefallen wird erst auf Kommando (`ist-los`), nicht beim Einhaengen: bis die
 * Handschriften geladen sind, vergeht eine halbe Sekunde, und ein Zettel, der
 * waehrenddessen schon liegt, faellt nie.
 */
.wgr-fall { position: relative; transform-origin: 50% -80px; }
.wgr-fall.ist-los { animation: wgrFall 1.05s cubic-bezier(.22, .68, .28, 1.02) both; }

/*
 * Er faellt und bleibt GERADE stehen. Eine schiefe Endlage hatte er einmal —
 * sie gehoerte zu einem Zettel mit Klebeband, und beides ist raus: der kleine
 * Sticker im Hero haengt gerade an der Menueleiste, und zwei Bruederchen
 * duerfen nicht verschieden herumhaengen. Geblieben ist das Nachwippen,
 * einmal ueber die Ruhelage hinaus.
 */
@keyframes wgrFall {
  0%   { transform: translateY(-128vh) rotate(-3.5deg); }
  58%  { transform: translateY(0) rotate(1.4deg); }
  74%  { transform: translateY(-10px) rotate(-.8deg); }
  88%  { transform: translateY(0) rotate(.3deg); }
  100% { transform: translateY(0) rotate(0); }
}

.wgr-karte {
  position: relative;
  width: 660px;
  padding: 30px 38px 24px;
  background: #F4A800;
  color: #171717;
  box-shadow: 0 26px 60px rgba(4, 16, 52, .5), 0 3px 10px rgba(4, 16, 52, .34);
  transform: scale(var(--wgr-mass, 1));
  transform-origin: 50% 50%;
}

/* Der Lichtstreifen quer ueber die Folie — Winkel und Werte wie am kleinen. */
.wgr-karte::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0 14%, transparent 26% 100%);
}

/* --- Schliessen --------------------------------------------------------- */

/*
 * Das X ist der einzige Weg hinaus (neben Escape und dem Knopf am Fuss): auf
 * den Grund zu klicken schliesst NICHT. Eine Nachricht, die es genau einmal
 * gibt, darf nicht an einem Klick daneben verloren gehen.
 *
 * Weiss auf Gelb, wie der Kranich daneben — kein Navy: auf diesem Papier
 * kommen nur zwei Farben vor.
 */
.wgr-zu {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  color: #171717;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.wgr-zu:hover { background: #fff; transform: rotate(90deg); }
.wgr-zu:focus-visible { outline: 3px solid #171717; outline-offset: 2px; }
.wgr-zu svg { width: 17px; height: 17px; }
.wgr-zu path { stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; fill: none; }

/* --- Kopf: Kranich links, Handschrift rechts ---------------------------- */

/*
 * Die Aufteilung des kleinen Stickers: der Kranich sitzt oben links, der
 * Gruss steht rechts daneben und ist rechtsbuendig. Das ist dort keine Laune,
 * sondern das, was die Karte erkennbar macht — also steht es hier genauso.
 */
.wgr-kranich { display: block; width: 46px; height: auto; }
/* Rechts bleibt Platz fuer das Schliesskreuz: es steht 16 px von der Kante,
   ragt also 22 px in den Satzspiegel hinein — ohne dieses Polster schreibt
   die Anrede mitten hinein. */
.wgr-kopf { margin-top: -34px; padding-left: 62px; padding-right: 34px; text-align: right; }

/* --- Handschrift -------------------------------------------------------- */

/*
 * Eine Zeile ist ein Block ueber die volle Breite, der Text darin `nowrap`.
 * Der Sweep laeuft ueber den TEXT, nicht ueber den Block — gemessen wird das
 * in `willkommen-gross.js` mit einer Range. Hier steht nur, was nicht
 * gemessen werden muss.
 *
 * `font-synthesis-weight: none`, weil nur Caveat eine echte Gewichtsachse
 * hat: Marker-Zeilen wuerde der Browser sonst still fett verschmieren.
 */
.wgr-ln {
  display: block;
  white-space: nowrap;
  line-height: 1.06;
  color: #171717;
  font-synthesis-weight: none;
}

.wgr-anrede { margin-bottom: 4px; }
.wgr-block { margin-top: 13px; }
.wgr-ruf { margin-top: 12px; }
.wgr-padblock { display: flex; align-items: flex-start; gap: 16px; margin-top: 13px; }
.wgr-padblock .wgr-zeilen { flex: 1; min-width: 0; }
/* Der Papierflieger fliegt neben dem Satz von den Fluegen — deshalb steht er
   unten rechts und nicht irgendwo. */
.wgr-schlussblock { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }

/* Die Kritzeleien: gezeichnet wird der Strich, nicht die Flaeche. Die Staerke
   ist am kleinen Sticker gemessen (2.4 auf 100 Einheiten bei 138 px Breite,
   also gut 3 px sichtbar) — duenner wirkt hier gestrichelt statt gemalt. */
.wgr-krit { flex: none; }
.wgr-krit path { stroke: #171717; fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.wgr-krit.ist-flug { width: 108px; margin-bottom: 2px; transform: rotate(-7deg); }
.wgr-krit.ist-pad  { width: 112px; margin-top: 6px; transform: rotate(4deg); }

/* Der Zug unter der Kopfzeile — ein Strich mit dem Handgelenk, keine Linie.
   Er steht rechts wie die Zeile darueber, und er ist etwas laenger als sie:
   ein Unterstrich, der genau am Wort endet, sieht nach Lineal aus. */
.wgr-strich { display: block; width: 286px; height: 14px; margin: 3px 0 0 auto; overflow: visible; }
.wgr-strich path { stroke: #171717; fill: none; stroke-width: 3.6; stroke-linecap: round; }

/* --- Signatur: das Herz um die Marke ------------------------------------ */

/*
 * Der Kranich im Herzen ist die Unterschrift — deshalb steht er gross da und
 * nicht als Beiwerk. Das Herz ist **um ihn herum** gezeichnet: die beiden
 * Boegen oben fassen den runden Markenkreis ein, die Spitze laeuft dicht
 * darunter aus. Ein Herz, in dessen Mitte ein kleiner Kreis schwebt, waere
 * zwei Zeichen nebeneinander; so ist es eines.
 *
 * Ein zweiter LH-VIRTUAL-Schriftzug darunter braucht es nicht: der Fuss sagt
 * schon „Willkommen", und die Marke steht im Herzen.
 */
.wgr-sig { margin-top: 18px; text-align: center; }
.wgr-herz { position: relative; width: 190px; margin: 0 auto; }
.wgr-herz svg { display: block; width: 100%; overflow: visible; }
/* Gemalt, nicht gesetzt: dieselbe Tinte wie jede andere Kritzelei auf diesem
   Papier, und in der Anzeigegroesse dieselbe Strichstaerke (2.8 auf 128
   Einheiten bei 190 px sind gut 4 px). */
.wgr-herz path { stroke: #171717; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
/* Die Marke sitzt dort, wo das Herz am breitesten ist — knapp oberhalb der
   Mitte, unter der Einkerbung. Die 61 % sind kein Augenmass: der Kreis der
   Marke misst 277 von 309 Bildpunkten, und mit ihm bleiben links und rechts
   je 13 Einheiten Luft bis zur Kontur. Weiss auf Gelb wie der Kranich oben
   links, kein Filter — `LHV_Kranich.png` IST die weisse Fassung. */
.wgr-herz img { position: absolute; left: 50%; top: 46%; width: 61%; height: auto; transform: translate(-50%, -50%); opacity: 0; transition: opacity .5s ease; }
.wgr-herz.ist-fertig img { opacity: 1; }

/* --- Fuss: Willkommen / Welcome, und was man tun kann -------------------- */

/*
 * Die Trennlinie und das Weiss darunter sind woertlich der Fuss des kleinen
 * Stickers (`.ws-hello`): 2 px in rgba(0,0,0,.15), „Willkommen" in LHV Head
 * Bold, darunter dasselbe in der Sprache des Besuchers. Rechts daneben steht
 * hier, was die Nachricht anbietet — der kleine Sticker bietet nichts an, der
 * grosse schon.
 */
.wgr-fuss {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid rgba(0, 0, 0, .15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  opacity: 0;
  transition: opacity .4s ease;
}
.wgr-fuss.ist-da { opacity: 1; }
.wgr-hallo { text-align: left; }
.wgr-hallo b { display: block; font-family: 'LHV Head', 'Segoe UI', Arial, sans-serif; font-weight: 700; font-size: 30px; line-height: 1; color: #fff; }
.wgr-hallo span { display: block; margin-top: 3px; font-family: 'LHV Head', 'Segoe UI', Arial, sans-serif; font-size: 22px; line-height: 1.1; color: rgba(255, 255, 255, .88); }
.wgr-knoepfe { display: flex; align-items: center; gap: 4px; }

.wgr-knopf {
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #171717;
  font: 700 15px 'LHV Head', 'Segoe UI', Arial, sans-serif;
  cursor: pointer;
  transition: background .18s ease;
}
.wgr-knopf:hover { background: rgba(255, 255, 255, .82); }
.wgr-knopf:focus-visible { outline: 3px solid #171717; outline-offset: 3px; }
.wgr-leise {
  padding: 11px 10px;
  border: 0;
  background: none;
  color: #171717;
  font: 700 14px 'LHV Head', 'Segoe UI', Arial, sans-serif;
  opacity: .74;
  cursor: pointer;
}
.wgr-leise:hover { opacity: 1; text-decoration: underline; }

/* --- Der Hinweis unter der Karte ---------------------------------------- */

/*
 * „Weiterklicken" steht ausserhalb der Karte: auf der Karte waere es Teil der
 * Nachricht. Er kommt erst, wenn das Schreiben laenger dauert als die Geduld
 * (2,6 s), und geht, sobald alles steht.
 */
.wgr-tipp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  text-align: center;
  color: rgba(255, 255, 255, .74);
  font: 400 13px 'LHV Text', 'Segoe UI', Arial, sans-serif;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.wgr-tipp.ist-da { opacity: 1; }

/* --- Ohne Bewegung ------------------------------------------------------ */

/*
 * Wer Bewegung abbestellt hat, bekommt die fertige Karte: kein Fall, keine
 * Handschrift, die entsteht — der Zettel haengt einfach da. Die Nachricht ist
 * dieselbe, und darum geht es.
 */
@media (prefers-reduced-motion: reduce) {
  .wgr-buehne { transition: none; }
  .wgr-fall, .wgr-fall.ist-los { animation: none; transform: none; }
  .wgr-herz img, .wgr-fuss { transition: none; opacity: 1; }
  .wgr-tipp { display: none; }
}

/* Schmale Fenster: der Massstab kommt aus dem Skript, hier bleibt nur der
   Rand, den die Karte zum Fensterrand haelt. */
@media (max-width: 720px) { .wgr-buehne { padding: 10px; } }