/* ========================================================================== Login "Abfahrt" — UX 2027 Namespace: lg-* · self-contained (kein App-Chrome) Signature: Fallblatt-Anzeige (Solari-Board) + tageszeitabhängige Bühne ========================================================================== */ :root { /* === MARKEN-AKZENT — pro Unternehmen anpassen (aktuell: EX-LOG, Gold) === Später aus Company.primaryColor speisbar; nur dieser Block ändert sich. */ --lg-accent: #f6a01a; /* Kern-Gold (EX-LOG "LOG"/GmbH) */ --lg-accent-2: #fbbf24; /* helleres Amber (Verläufe/Highlights) */ --lg-accent-deep: #dd8f12; /* dunkles Gold (untere Klappen-Hälfte) */ --lg-accent-ink: #b45309; /* dunkles Amber für Text/Links/Fokus */ --lg-accent-contrast: #1a1206; /* Text auf gold-gefüllten Flächen */ --lg-accent-rgb: 246, 160, 26; /* Navy-Bühne (fast schwarz, blauer Unterton — nickt zum "EX"-Blau) */ --lg-ink-900: #060b16; --lg-ink-800: #0a1224; --lg-ink-700: #14213d; /* Helle Fläche (Formular) */ --lg-paper: #ffffff; --lg-paper-2: #f7f7f5; --lg-line: #e6e7e4; --lg-text: #16150f; --lg-text-muted: #5f5e55; --lg-text-faint: #6d6c62; --lg-danger-bg: #fef2f2; --lg-danger-bd: #fecaca; --lg-radius-sm: 11px; --lg-shadow-card: 0 24px 60px -28px rgba(6, 10, 22, .55); --lg-shadow-btn: 0 14px 26px -12px rgba(var(--lg-accent-rgb), .60); --lg-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif; --lg-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --lg-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Tageszeit-Stimmung (JS setzt data-daypart auf ) */ --lg-aurora-op: .85; --lg-aurora-hue: 0deg; } body[data-daypart="dawn"] { --lg-aurora-op: 1; --lg-aurora-hue: -6deg; } body[data-daypart="day"] { --lg-aurora-op: .75; } body[data-daypart="dusk"] { --lg-aurora-op: .92; --lg-aurora-hue: -14deg; } body[data-daypart="night"] { --lg-aurora-op: .62; --lg-aurora-hue: -4deg; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { font-family: var(--lg-sans); color: var(--lg-text); background: var(--lg-ink-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--lg-accent-2); color: var(--lg-accent-contrast); } /* ---- Grundgerüst: Split ------------------------------------------------- */ .lg-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.28fr 1fr; } /* ========================================================================== BÜHNE (links) — Navy + Aurora + Fallblatt-Board ========================================================================== */ .lg-stage { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 12% 8%, var(--lg-ink-700) 0%, var(--lg-ink-800) 45%, var(--lg-ink-900) 100%); color: #f4efe2; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(2.2rem, 4vw, 4rem); isolation: isolate; } /* Aurora-Wolken (Gold) — Parallax über `translate`, Drift über `transform` */ .lg-aurora, .lg-aurora::before, .lg-aurora::after { content: ""; position: absolute; border-radius: 50%; z-index: -2; pointer-events: none; will-change: transform, opacity; filter: blur(58px) hue-rotate(var(--lg-aurora-hue)); } .lg-aurora { top: -14%; left: -8%; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle at 50% 50%, rgba(var(--lg-accent-rgb), .40), transparent 62%); opacity: var(--lg-aurora-op); animation: lg-drift-a 26s ease-in-out infinite alternate; translate: var(--lg-px, 0px) var(--lg-py, 0px); transition: translate .5s cubic-bezier(.2, .7, .3, 1); } .lg-aurora::before { inset: auto -20% -25% auto; width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; background: radial-gradient(circle at 50% 50%, rgba(var(--lg-accent-rgb), .30), transparent 60%); animation: lg-drift-b 32s ease-in-out infinite alternate; } .lg-aurora::after { inset: 30% -10% auto 40%; width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; background: radial-gradient(circle at 50% 50%, rgba(var(--lg-accent-rgb), .22), transparent 64%); animation: lg-drift-a 22s ease-in-out infinite alternate-reverse; } /* Feines Raster + Vignette */ .lg-stage::before { content: ""; position: absolute; inset: -30px; z-index: -2; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(115% 90% at 20% 12%, #000 0%, transparent 78%); mask-image: radial-gradient(115% 90% at 20% 12%, #000 0%, transparent 78%); opacity: .7; translate: calc(var(--lg-px, 0px) * -.3) calc(var(--lg-py, 0px) * -.3); transition: translate .5s cubic-bezier(.2, .7, .3, 1); } .lg-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 120% at 78% 92%, transparent 45%, rgba(2, 4, 9, .7) 100%); pointer-events: none; } /* Kopfzeile der Bühne */ .lg-stage__top { position: relative; display: flex; align-items: center; } /* Status-Chip im Kachel-Vokabular des Boards (kein Pill) */ .lg-status { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .48rem .8rem; border-radius: 7px; background: linear-gradient(180deg, #1d2949 0%, #131f3c 48%, #0d1730 52%, #111c37 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 2px 8px rgba(0, 0, 0, .35); font-family: var(--lg-display); font-weight: 700; font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; color: #eadfc7; } .lg-status::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(3, 6, 14, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); pointer-events: none; } .lg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lg-accent-2); box-shadow: 0 0 0 0 rgba(var(--lg-accent-rgb), .55); animation: lg-pulse 2.4s ease-out infinite; } /* ---- Fallblatt-Board (Signature) ---------------------------------------- */ .lg-stage__mid { position: relative; } /* Lichtpunkt hinter dem Board — wie eine Lampe über der Anzeigetafel */ .lg-stage__mid::before { content: ""; position: absolute; inset: -60% -30% -50% -40%; z-index: -1; background: radial-gradient(55% 60% at 32% 45%, rgba(var(--lg-accent-rgb), .13), transparent 72%); pointer-events: none; } .lg-board { margin: 0; display: flex; flex-direction: column; gap: .16em; font-family: var(--lg-display); font-weight: 800; font-size: clamp(2.6rem, 5.3vw, 4.5rem); line-height: 1; letter-spacing: .01em; color: #f7f2e4; } .lg-board__row { display: flex; gap: .07em; } /* Fallback ohne JS: Zeilen als reiner Text */ .lg-board__row--accent { color: var(--lg-accent-2); } .lg-flap { position: relative; display: inline-flex; align-items: center; justify-content: center; width: .74em; height: 1.24em; border-radius: .09em; background: linear-gradient(180deg, #1d2949 0%, #131f3c 48%, #0d1730 52%, #111c37 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .04), 0 .06em .2em rgba(0, 0, 0, .5); color: #f7f2e4; overflow: hidden; backface-visibility: hidden; } /* Trennlinie der beiden Klappen-Hälften — Unterkante fängt Licht */ .lg-flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: max(1px, .022em); background: rgba(3, 6, 14, .6); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } .lg-flap--accent { background: linear-gradient(180deg, var(--lg-accent-2) 0%, var(--lg-accent) 52%, var(--lg-accent-deep) 100%); color: var(--lg-accent-contrast); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 .08em .3em rgba(var(--lg-accent-rgb), .35), 0 .1em .22em rgba(0, 0, 0, .35); } .lg-flap--accent::after { background: rgba(90, 55, 5, .35); box-shadow: 0 1px 0 rgba(255, 255, 255, .28); } .lg-flap--gap { width: .34em; background: transparent; box-shadow: none; } .lg-flap--gap::after { display: none; } .lg-flap.is-spin { animation: lg-flap-spin .13s linear infinite; } /* Datenzeile: Wochentag · Datum · KW · Uhrzeit (echte Werte, JS) */ .lg-strip { margin-top: 1.6rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .55rem; font-family: var(--lg-mono); font-weight: 500; font-size: .95rem; animation: lg-fade .8s .5s ease backwards; } .lg-strip__seg { display: inline-flex; gap: .14em; } .lg-strip .lg-flap { width: 1.34em; height: 1.72em; border-radius: .15em; font-family: var(--lg-mono); font-weight: 500; color: #f3ecd8; } .lg-strip .lg-flap--gap { width: .5em; } .lg-strip__sep { color: rgba(240, 232, 210, .38); } /* Fußzeile der Bühne */ .lg-stage__foot { position: relative; display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: rgba(224, 214, 190, .65); } .lg-stage__foot svg { width: 14px; height: 14px; } /* ========================================================================== FORMULAR (rechts) — helle Fläche, Marken-Logo ========================================================================== */ .lg-panel { background: var(--lg-paper); display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 4vw, 3rem); /* Goldkante an der Naht zur Bühne — Echo des Logo-Pfeils */ box-shadow: inset 3px 0 0 var(--lg-accent); } .lg-card { width: 100%; max-width: 400px; } /* Orchestrierter Einstieg: Karteninhalt steigt gestaffelt auf */ .lg-card > * { animation: lg-rise .55s cubic-bezier(.2, .75, .25, 1) backwards; } .lg-card > *:nth-child(1) { animation-delay: .06s; } .lg-card > *:nth-child(2) { animation-delay: .13s; } .lg-card > *:nth-child(3) { animation-delay: .20s; } .lg-card > *:nth-child(4) { animation-delay: .27s; } .lg-card > *:nth-child(5) { animation-delay: .34s; } .lg-card > *:nth-child(6) { animation-delay: .41s; } .lg-brand { min-height: 54px; margin-bottom: 2.1rem; display: flex; align-items: center; } .lg-brand img { max-width: 190px; max-height: 54px; width: auto; height: auto; } .lg-title { font-family: var(--lg-display); text-transform: uppercase; font-size: 2.1rem; font-weight: 800; letter-spacing: .015em; line-height: 1; margin: 0 0 1.6rem; color: var(--lg-text); } /* Meldungen */ .lg-alert { border-radius: var(--lg-radius-sm); padding: .8rem 1rem; font-size: .9rem; margin-bottom: 1.1rem; display: flex; align-items: flex-start; gap: .55rem; line-height: 1.4; } .lg-alert svg { width: 17px; height: 17px; flex: none; margin-top: 2px; } .lg-alert--error { background: var(--lg-danger-bg); border: 1px solid var(--lg-danger-bd); color: #991b1b; /* rote Kante — zitiert die Goldnaht der Seite */ box-shadow: inset 3px 0 0 #dc2626; } .lg-alert--ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } /* Live-Variante: bleibt IMMER gerendert (Screenreader registrieren display:none-Live-Regionen nicht) — Text schreibt JS hinein */ .lg-alert--live:not(.is-on) { padding: 0; border-width: 0; margin: 0; box-shadow: none; } .lg-alert--live:not(.is-on) svg { display: none; } /* Floating-Label Felder */ .lg-field { position: relative; margin-bottom: 1rem; } .lg-input { width: 100%; height: 58px; padding: 1.35rem .95rem .45rem; font-size: 1rem; font-family: inherit; color: var(--lg-text); background: var(--lg-paper-2); border: 1.5px solid var(--lg-line); border-radius: var(--lg-radius-sm); outline: none; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .lg-input::placeholder { color: transparent; } .lg-input:hover { border-color: #d4d5d0; } .lg-input:focus { background: var(--lg-paper); border-color: var(--lg-accent-ink); /* dunkles Amber: >=3:1 fuer Fokus-Indikator */ box-shadow: 0 0 0 4px rgba(var(--lg-accent-rgb), .22); } .lg-field label { position: absolute; left: 1rem; top: 1.06rem; font-size: 1rem; color: var(--lg-text-faint); pointer-events: none; transform-origin: left top; transition: transform .16s ease, color .16s ease; } .lg-input:focus + label, .lg-input:not(:placeholder-shown) + label { transform: translateY(-.72rem) scale(.76); color: var(--lg-text-muted); /* neutral — Orange laese sich als Fehler */ font-weight: 600; } /* Browser-Autofill: Fläche ruhig halten, Label oben einrasten */ .lg-input:-webkit-autofill, .lg-input:-webkit-autofill:hover, .lg-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--lg-paper-2) inset; -webkit-text-fill-color: var(--lg-text); caret-color: var(--lg-text); } .lg-input:-webkit-autofill + label { transform: translateY(-.72rem) scale(.76); color: var(--lg-text-muted); font-weight: 600; } /* Kennwort-Sichtbarkeit */ .lg-field--pw .lg-input { padding-right: 3rem; } .lg-reveal { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--lg-text-faint); cursor: pointer; border-radius: 10px; transition: color .15s ease, background .15s ease; } .lg-reveal:hover { color: var(--lg-text); background: rgba(0, 0, 0, .04); } .lg-reveal:focus-visible { outline: 2px solid var(--lg-accent-ink); outline-offset: 2px; } .lg-reveal svg { width: 20px; height: 20px; } .lg-reveal .lg-eye-off { display: none; } .lg-reveal.is-on .lg-eye { display: none; } .lg-reveal.is-on .lg-eye-off { display: block; } /* Feststelltaste-Hinweis — Live-Region bleibt immer gerendert, JS schreibt den Text hinein (sonst keine Screenreader-Ansage) */ .lg-hint { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .84rem; font-weight: 600; color: var(--lg-accent-ink); } .lg-hint.is-on { margin: -.2rem 0 .9rem; } .lg-hint:not(.is-on) svg { display: none; } .lg-hint svg { width: 15px; height: 15px; flex: none; } /* Zeile: vergessen */ .lg-row-forgot { display: flex; justify-content: flex-end; margin: .1rem 0 1.4rem; } .lg-link { font-size: .88rem; font-weight: 600; color: var(--lg-accent-ink); text-decoration: none; transition: color .15s ease; } .lg-link:hover { color: var(--lg-accent-ink); text-decoration: underline; text-underline-offset: 3px; } /* Anmelde-Button — eine große goldene Fallblatt-Kachel (mit Klappen-Fuge) */ .lg-submit { position: relative; overflow: hidden; width: 100%; height: 54px; border: 0; border-radius: 9px; font-family: var(--lg-display); font-size: 1.22rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lg-accent-contrast); cursor: pointer; background: linear-gradient(180deg, transparent 0 calc(50% - .5px), rgba(90, 55, 5, .30) calc(50% - .5px) calc(50% + .5px), rgba(255, 255, 255, .18) calc(50% + .5px) calc(50% + 1.5px), transparent calc(50% + 1.5px)), linear-gradient(180deg, var(--lg-accent-2) 0%, var(--lg-accent) 52%, var(--lg-accent-deep) 100%); box-shadow: var(--lg-shadow-btn), inset 0 1px 0 rgba(255, 255, 255, .38); transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; } /* Glanz-Sweep beim Hover */ .lg-submit::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; } .lg-submit:hover::before { animation: lg-shine .8s ease forwards; } .lg-submit svg { width: 18px; height: 18px; transition: transform .18s ease; } .lg-submit:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 20px 34px -14px rgba(var(--lg-accent-rgb), .7), inset 0 1px 0 rgba(255, 255, 255, .4); } .lg-submit:hover svg { transform: translateX(3px); } .lg-submit:active { transform: translateY(0); } .lg-submit:focus-visible { outline: 3px solid var(--lg-accent-ink); outline-offset: 2px; } /* Ladezustand nach Absenden */ .lg-submit.is-loading { pointer-events: none; filter: saturate(.9); } .lg-submit.is-loading svg { display: none; } .lg-submit.is-loading::after { content: ""; width: 17px; height: 17px; border-radius: 50%; border: 2.5px solid rgba(26, 18, 6, .3); border-top-color: var(--lg-accent-contrast); animation: lg-spin .7s linear infinite; } /* Trust-Fuß */ .lg-trust { margin-top: 1.7rem; padding-top: 1.3rem; border-top: 1px solid var(--lg-line); display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--lg-text-faint); } .lg-trust svg { width: 14px; height: 14px; color: var(--lg-accent-ink); flex: none; } /* ========================================================================== SOLO-Variante (Kennwort vergessen / neu / versendet) — zentrierte Karte ========================================================================== */ .lg-solo { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 5vw, 3rem); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(120% 120% at 15% 10%, var(--lg-ink-700) 0%, var(--lg-ink-800) 45%, var(--lg-ink-900) 100%); } .lg-solo::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(115% 90% at 20% 12%, #000 0%, transparent 78%); mask-image: radial-gradient(115% 90% at 20% 12%, #000 0%, transparent 78%); opacity: .6; } .lg-solo .lg-card { max-width: 460px; background: var(--lg-paper); padding: clamp(2rem, 4vw, 2.9rem); border-radius: 14px; border-top: 3px solid var(--lg-accent); /* Echo der Goldnaht des Logins */ box-shadow: var(--lg-shadow-card); position: relative; z-index: 1; } .lg-solo .lg-brand { margin-bottom: 1.7rem; } .lg-note { margin: 0 0 1.5rem; color: var(--lg-text-muted); font-size: .96rem; line-height: 1.6; } .lg-icon-badge { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.3rem; color: var(--lg-accent-ink); background: #fffbeb; border: 1px solid #fde68a; } .lg-icon-badge svg { width: 28px; height: 28px; } .lg-back { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.4rem; font-size: .9rem; font-weight: 600; color: var(--lg-text-muted); text-decoration: none; transition: color .15s ease; } .lg-back:hover { color: var(--lg-accent-ink); } .lg-back svg { width: 16px; height: 16px; } /* ========================================================================== Responsiv — Bühne wird Kopfbereich, Karte schwebt ========================================================================== */ @media (max-width: 900px) { .lg-shell { grid-template-columns: 1fr; } .lg-stage { min-height: 44vh; padding: clamp(1.6rem, 6vw, 2.4rem); padding-bottom: 3.4rem; justify-content: flex-end; } .lg-stage__top { position: absolute; top: 1.4rem; left: clamp(1.6rem, 6vw, 2.4rem); } .lg-stage__foot { display: none; } .lg-board { font-size: clamp(2rem, 8.4vw, 2.7rem); } .lg-strip { font-size: .78rem; margin-top: 1.2rem; gap: .35rem .4rem; } /* Auf kleinen Screens entfällt die Uhr (Statusleiste zeigt sie ohnehin) — die KW ist für Disponenten der wertvollere Token */ .lg-strip__seg--time, .lg-strip__sep--time { display: none; } .lg-panel { /* positioniert, sonst malt die (relative) Bühne über die Überlappung */ position: relative; margin-top: -26px; border-radius: 26px 26px 0 0; padding: 2.2rem clamp(1.4rem, 6vw, 2rem) 2.6rem; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .3), inset 0 3px 0 var(--lg-accent); } .lg-card { max-width: 440px; } } /* ========================================================================== Bewegung reduzieren ========================================================================== */ @media (prefers-reduced-motion: reduce) { .lg-aurora, .lg-aurora::before, .lg-aurora::after, .lg-flap, .lg-strip, .lg-dot, .lg-card > *, .lg-submit, .lg-submit::before, .lg-submit::after, .lg-submit svg { animation: none !important; transition: none !important; } } /* ========================================================================== Keyframes ========================================================================== */ /* Perspektive pro Kachel (im Keyframe), sonst verzerren Randkacheln */ @keyframes lg-flap-spin { 0% { transform: perspective(2.8em) rotateX(0); } 50% { transform: perspective(2.8em) rotateX(-54deg); filter: brightness(.8); } 100% { transform: perspective(2.8em) rotateX(0); } } @keyframes lg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes lg-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes lg-shine { 0% { left: -60%; opacity: 0; } 18% { opacity: 1; } 100% { left: 115%; opacity: 0; } } @keyframes lg-spin { to { transform: rotate(1turn); } } @keyframes lg-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--lg-accent-rgb), .5); } 70% { box-shadow: 0 0 0 9px rgba(var(--lg-accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--lg-accent-rgb), 0); } } @keyframes lg-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(6%, 8%, 0) scale(1.12); } } @keyframes lg-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1.05); opacity: .8; } 100% { transform: translate3d(-7%, -6%, 0) scale(.95); opacity: 1; } }