@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* Pegasus Copilot — Willkommen nach dem Anmelden („Gold, clean", 24.09.2026)
   Gehört zu assets/js/willkommen.js. Alles hängt unter .pgcw, damit nichts mit
   login.php, select-company.php oder main.css zusammenstößt.

   Gold und Staub sind da, aber ruhig: flächiges Blau, Staub nur als Goldkontur,
   ein einziger Glanz, klare Schrift ohne Unschärfe, eine Zeile Fußnote. */

.pgcw {
  --tinte: #FAF6EF;
  --gold: #C9A24A;
  --ease: cubic-bezier(.2, .8, .2, 1);
  position: fixed; inset: 0; z-index: 9999;
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  background: #0F1B2D;
  color: var(--tinte); font: 400 16px/1.5 'DM Sans', system-ui, sans-serif; text-align: center;
  -webkit-font-smoothing: antialiased;
}
.pgcw *, .pgcw *::before, .pgcw *::after { box-sizing: border-box; }
.pgcw:focus { outline: none; }
.pgcw :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.pgcw h1, .pgcw h2, .pgcw p { margin: 0; padding: 0; }

.pgcw-staub, .pgcw-schimmer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Goldkante am Rand des sich öffnenden Blaus */
.pgcw-rand { position: absolute; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(227,190,114,.9), inset 0 0 18px rgba(201,162,74,.25); }
.pgcw-buehne {
  position: relative; align-self: center; justify-self: center;
  display: flex; flex-direction: column; align-items: center; padding: 0 1.5rem;
  transform: translateY(-2vh) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.1s var(--ease);
}

/* Das Zeichen in seinen echten Farben: dunkler Körper, Goldkontur */
.pgcw-marke { position: relative; width: clamp(150px, min(16vw, 23vh), 210px); aspect-ratio: 737 / 618; opacity: 0; perspective: 560px; }
.pgcw-marke img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
/* Zwei Lagen: rechts Kopf und Hals, links die Flügel. Die Flügel drehen um
   eine senkrechte Achse genau an der Schnittkante — kein Spalt, keine Doppelkante. */
.pgcw-koerper { clip-path: inset(0 0 0 52%); }
.pgcw-fluegel { clip-path: inset(0 calc(48% - 1px) 0 0); transform-origin: 52% 60%; }
.pgcw-marke { transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform 1.1s var(--ease); }
.pgcw--marke .pgcw-fluegel { animation: pgcwSchlagEins 1.25s cubic-bezier(.45, 0, .3, 1) .12s both; }
/* Ein einziger, weicher Flügelschlag, wenn das Zeichen steht */
@keyframes pgcwSchlagEins { 0% { transform: rotateY(0); } 38% { transform: rotateY(34deg); } 72% { transform: rotateY(-3deg); } 100% { transform: rotateY(0); } }

/* Ein Glanz, einmal, dann folgt er leise der Maus */
.pgcw-glanz {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(100deg, transparent 44%, rgba(255,228,168,.55) 50%, transparent 56%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask: url(../img/pegasus-mark.png) center / 100% 100% no-repeat; mask: url(../img/pegasus-mark.png) center / 100% 100% no-repeat;
}
.pgcw--marke .pgcw-glanz { animation: pgcwGlanz 1.3s cubic-bezier(.45, 0, .2, 1) .25s forwards; }
.pgcw--marke .pgcw-glanz.folgt { animation: none; opacity: .22; background-position: var(--lx, 120%) 0; transition: background-position .9s var(--ease); }
@keyframes pgcwGlanz { 0% { opacity: 1; background-position: 100% 0; } 100% { opacity: 1; background-position: 0 0; } }

/* Begrüßung */
.pgcw-gruss { margin-top: 2rem !important; font: 500 clamp(2.1rem, 3.4vw, 3rem)/1.12 'Outfit', system-ui, sans-serif; letter-spacing: -.025em; color: var(--tinte); }
.pgcw-gruss { transform: translate3d(calc(var(--mx, 0) * .45), calc(var(--my, 0) * .45), 0); transition: transform 1.1s var(--ease); }
.pgcw-wort { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.pgcw-wort-in { display: inline-block; transform: translateY(112%); transition: transform .8s cubic-bezier(.19, 1, .22, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.pgcw--gruss .pgcw-wort-in { transform: none; }
/* Der Vorname in Gold */
.pgcw-name .pgcw-wort-in {
  background: linear-gradient(100deg, #B8862B 0%, #D6AC57 30%, #FFF1CC 46%, #D6AC57 62%, #B8862B 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.pgcw--gruss .pgcw-name .pgcw-wort-in { animation: pgcwNameGlanz 1.6s cubic-bezier(.45, 0, .2, 1) .55s forwards; }
@keyframes pgcwNameGlanz { to { background-position: 0 0; } }

.pgcw-ort { margin-top: .6rem !important; font: 500 .95rem/1.4 'DM Sans', system-ui, sans-serif; letter-spacing: .01em; color: rgba(250,246,239,.56); opacity: 0; transform: translateY(6px); transition: opacity .55s var(--ease) .18s, transform .6s var(--ease) .18s; }
.pgcw--gruss .pgcw-ort { opacity: 1; transform: none; }

/* Eine feine Goldlinie läuft einmal durch, solange die Übersicht vorlädt */
.pgcw-linie { position: relative; width: 168px; height: 2px; margin-top: 2.1rem; border-radius: 2px; overflow: hidden; background: rgba(250,246,239,.12); opacity: 0; transition: opacity .5s ease .25s; }
.pgcw-linie span { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #B8862B, #E3BE72); transform: scaleX(0); transform-origin: 0 50%; }
.pgcw--gruss .pgcw-linie { opacity: 1; }
.pgcw--gruss .pgcw-linie span { animation: pgcwLinie 1.7s cubic-bezier(.45, 0, .2, 1) .3s forwards; }
.pgcw--halt .pgcw-linie span, .pgcw--halt .pgcw-linie::after { animation-play-state: paused; }
/* Ein Lichtreflex wandert über die Linie, während sie sich füllt */
.pgcw-linie::after {
  content: ''; position: absolute; top: -1px; bottom: -1px; left: 0; width: 42px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,246,220,.95), transparent);
  transform: translateX(-60px); opacity: 0;
}
.pgcw--gruss .pgcw-linie::after { animation: pgcwReflex 1.7s cubic-bezier(.45, 0, .2, 1) .3s forwards; }
@keyframes pgcwReflex { 0% { transform: translateX(-60px); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }
@keyframes pgcwLinie { to { transform: scaleX(1); } }

/* Fußzeile: letzte Anmeldung, leise, eine Zeile */
.pgcw-fuss { padding: 1.25rem clamp(1.5rem, 4vw, 3rem) 1.9rem; font: 400 .82rem/1.5 'DM Sans', system-ui, sans-serif; color: rgba(250,246,239,.42); opacity: 0; transition: opacity .6s ease .45s; }
.pgcw--gruss .pgcw-fuss { opacity: 1; }
.pgcw-fuss p { display: block; max-width: none; margin: 0 auto; white-space: nowrap; text-align: center; }
.pgcw-trenner { margin: 0 .45rem; opacity: .6; }
.pgcw-link { display: inline; width: auto; min-width: 0; height: auto; margin: 0; box-shadow: none; padding: 0; border: 0; background: none; color: rgba(250,246,239,.7); font: 500 .82rem 'DM Sans', system-ui, sans-serif; text-decoration: underline; text-decoration-color: rgba(201,162,74,.6); text-underline-offset: 3px; cursor: pointer; }
.pgcw-link:hover { color: var(--tinte); }

/* Zurücktreten: nur das Zeichen bleibt, die Übersicht übernimmt es */
/* Die Wörter steigen nach oben hinaus (siehe .pgcw-wort-in), der Rest tritt zurück */
.pgcw--ab .pgcw-ort, .pgcw--ab .pgcw-linie, .pgcw--ab .pgcw-fuss {
  opacity: 0 !important; transform: translateY(-4px); transition: opacity .22s ease, transform .26s ease !important; transition-delay: 0s !important;
}
.pgcw--ab .pgcw-wort-in { transform: translateY(-112%); transition: transform .32s cubic-bezier(.55, 0, .75, .3) !important; transition-delay: calc(var(--i, 0) * 25ms) !important; }
.pgcw--ab .pgcw-glanz { opacity: 0 !important; transition: opacity .2s ease !important; }
.pgcw--eilig, .pgcw--eilig * { transition-duration: .18s !important; transition-delay: 0s !important; animation-duration: .2s !important; animation-delay: 0s !important; }

/* ── „Das war nicht ich": Passwort ändern, alle anderen Sitzungen enden ── */
.pgcw-nb { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 1.5rem; background: rgba(15,27,45,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.pgcw-nb.pgcw-nb--offen { opacity: 1; }
.pgcw-nb-karte { width: min(440px, 100%); padding: 1.75rem; border-radius: 14px; background: #FAF6EF; color: #0F1B2D; box-shadow: 0 30px 80px -20px rgba(8,14,24,.5); text-align: left; }
.pgcw-nb-karte h2 { margin-bottom: .6rem !important; font: 600 1.35rem/1.25 'Outfit', system-ui, sans-serif; letter-spacing: -.02em; color: #0F1B2D; }
.pgcw-nb-karte p { font: 400 .95rem/1.55 'DM Sans', system-ui, sans-serif; color: #2A3547; }
.pgcw-nb-karte label { display: block; margin-top: .9rem; font: 500 .85rem 'DM Sans', system-ui, sans-serif; color: #5C5249; }
.pgcw-nb-karte input { display: block; width: 100%; margin-top: .35rem; padding: .7rem .85rem; border: 1px solid #DCCFBB; border-radius: 10px; background: #fff; font: 400 1rem 'DM Sans', system-ui, sans-serif; color: #0F1B2D; }
.pgcw-nb-karte .pgcw-nb-regel { margin-top: .6rem; font-size: .82rem; color: #8B7E74; }
.pgcw-nb-karte .pgcw-nb-fehler { margin-top: .8rem; padding: .6rem .8rem; border-radius: 8px; background: rgba(155,59,59,.08); color: #9B3B3B; font-size: .9rem; }
.pgcw-nb-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.pgcw-nb-knoepfe button { padding: .75rem 1.1rem; border-radius: 10px; font: 600 .92rem 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.pgcw-nb-ja { border: 0; background: #0F1B2D; color: #FAF6EF; }
.pgcw-nb-ja:disabled { opacity: .7; cursor: default; }
.pgcw-nb-nein { border: 1px solid #D8CCB6; background: transparent; color: #0F1B2D; }