/* ============================================================
LACKDOKTOR - LOGIN-INTRO ("Lackierkabine")
Uebernommen aus Logo/lackdoktor-login.html (Ben, 2026-07-29).
Anpassungen fuer die App: alle Klassen mit Praefix "ld-" (die App-weite
style.css belegt .card/.btn schon anders), body-Regeln auf #login-screen
umgezogen (der Login-Screen IST die Buehne), globaler *-Reset entfaellt
(style.css Zeile 212 setzt bereits identisch box-sizing/margin/padding).
Ablauf (~5,2 s):
0,35-2,40 s Logo wird per Spruehnebel von links nach rechts aufgespruecht
2,40 s Farbexplosion: Kleckse, Schockwelle, Screen-Shake
2,95 s Glanz-Sweep ueber den Schriftzug
3,00-3,80 s Logo setzt sich an seine Endposition
3,35-4,00 s Login-Karte faehrt ein - Kleckse tropfen aus
============================================================ */
:root{
/* Markenfarben - direkt aus der Original-Vektordatei gesampelt */
--ld-rot: #EE242D;
--ld-rot-dunkel: #A50F14;
--ld-blau: #2056AE;
--ld-gelb: #F0D400;
--ld-gruen: #66C430;
--ld-orange: #F68712;
--ld-hellblau: #45A2DF;
--ld-lila: #6243A4;
--ld-ink: #231F20;
--ld-wand-1: #f8fafc;
--ld-wand-2: #eef1f5;
--ld-wand-3: #e6eaef;
--ld-text-2: #5c6672;
--ld-linie: #dfe4ea;
}
/* ---------- Buehne (Lackierkabine) = der Login-Screen selbst ---------- */
/* Traegt die Regeln, die in der Vorlage auf body + .stage lagen. */
#login-screen.ld-stage{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
line-height: normal;
color: var(--ld-ink);
background:
radial-gradient(1200px 620px at 50% -8%, #ffffff 0%, rgba(255,255,255,0) 62%),
linear-gradient(180deg, var(--ld-wand-1) 0%, var(--ld-wand-2) 58%, var(--ld-wand-3) 100%);
overflow-x: hidden;
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(22px, 4vh, 44px);
padding: clamp(16px, 4vh, 48px) 16px;
}
/* dezente Kabinen-Vignette */
#login-screen.ld-stage::after{
content:""; position:absolute; inset:0; pointer-events:none;
background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 62%, rgba(24,34,50,.07) 100%);
}
/* Shake-Ebene (wackelt bei der Explosion) */
.ld-shaker{
position: relative;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(22px, 4vh, 44px);
will-change: transform;
}
/* ---------- Intro-Zone: Logo + Effekte ---------- */
.ld-intro-zone{
position: relative;
width: min(680px, 92vw);
will-change: transform;
}
/* Wandkleckse (bleiben nach der Explosion kleben) */
.ld-wall-splats{ position:absolute; inset:-18% -14%; z-index:1; pointer-events:none; }
.ld-splat{
position:absolute; opacity:0; transform: scale(.2) rotate(var(--rot,0deg));
transition: transform .38s cubic-bezier(.2,1.6,.4,1), opacity .18s ease-out;
filter: drop-shadow(0 2px 3px rgba(30,20,20,.10));
}
.ld-splat.on{ opacity:1; transform: scale(1) rotate(var(--rot,0deg)); }
.ld-splat svg{ display:block; overflow:visible; }
.ld-drip{
position:absolute; left:50%; width:6px; height:0; border-radius:0 0 6px 6px;
transform: translateX(-50%);
transition: height 1.9s cubic-bezier(.3,.05,.2,1);
}
.ld-splat.on .ld-drip{ height: var(--drip, 42px); }
/* Logo-Reveal (Clip von links nach rechts, per JS gesteuert) */
.ld-logo-clip{
position: relative; z-index:3;
padding: clamp(14px, 2.5vw, 26px) clamp(10px, 2vw, 20px);
clip-path: inset(0 100% 0 0);
will-change: clip-path;
}
.ld-logo-wrap{
position: relative;
overflow: hidden; /* fuer den Glanz-Sweep */
will-change: transform;
}
/* Das Logo liegt als eigene Datei vor und wird per ![]()
eingebunden
(INTEGRATION.md: Auslagern ausdruecklich vorgesehen). */
.ld-logo-wrap img{ display:block; width:100%; height:auto; }
/* Pop-Impuls des Logos im Moment der Explosion */
@keyframes ldLogoPop{
0%{ transform: scale(1); }
32%{ transform: scale(1.075); }
68%{ transform: scale(.985); }
100%{ transform: scale(1); }
}
.ld-logo-wrap.pop{ animation: ldLogoPop .55s cubic-bezier(.3,.7,.3,1) both; }
/* Glanz-Sweep */
.ld-gloss{
position:absolute; top:-12%; bottom:-12%; left:-45%; width:34%;
background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-18deg);
filter: blur(2px);
opacity:0; pointer-events:none;
}
.ld-gloss.run{ animation: ldGlossSweep .75s ease-in-out both; }
@keyframes ldGlossSweep{
0%{ left:-45%; opacity:0; }
15%{ opacity:.9; }
85%{ opacity:.9; }
100%{ left:112%; opacity:0; }
}
/* Spruehnebel-Kopf, der an der Reveal-Kante mitlaeuft (liegt auf Buehnen-Ebene) */
.ld-mist-head{
position:absolute; z-index:7; top:0; left:0;
width:150px; height:120px; margin-left:-75px; margin-top:-60px;
border-radius:50%;
background:
radial-gradient(closest-side, rgba(238,36,45,.30), rgba(238,36,45,0) 70%),
radial-gradient(closest-side at 38% 30%, rgba(240,212,0,.28), rgba(240,212,0,0) 65%),
radial-gradient(closest-side at 66% 68%, rgba(32,86,174,.26), rgba(32,86,174,0) 65%),
radial-gradient(closest-side at 30% 72%, rgba(102,196,48,.24), rgba(102,196,48,0) 60%);
filter: blur(10px);
mix-blend-mode: multiply;
opacity:0; pointer-events:none;
will-change: transform, opacity;
}
/* Schockwellen */
.ld-shockwave{
position:absolute; z-index:2; top:50%; left:50%;
width:120px; height:120px; margin:-60px 0 0 -60px;
border-radius:50%; opacity:0; pointer-events:none;
}
.ld-ring-a{ border: 3px solid rgba(238,36,45,.55); }
.ld-ring-b{ border: 10px solid rgba(35,31,32,.16); filter: blur(6px); }
.ld-shockwave.run{ animation: ldShock .62s cubic-bezier(.15,.6,.3,1) both; }
.ld-ring-b.run{ animation-duration:.72s; }
@keyframes ldShock{
0%{ transform: scale(.18); opacity:.95; }
100%{ transform: scale(6.2); opacity:0; }
}
/* ---------- Login-Karte ---------- */
.ld-card{
position: relative; z-index:6;
width: min(400px, 92vw);
background: #fff;
border: 1px solid var(--ld-linie);
border-radius: 16px;
padding: 26px 26px 24px;
box-shadow: 0 24px 60px rgba(20,30,50,.13), 0 3px 10px rgba(20,30,50,.05);
opacity: 0;
transform: translateY(26px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1);
}
.ld-card.in{ opacity:1; transform:none; }
.ld-card h1{
font-size: 20px; letter-spacing:.2px; margin-bottom: 4px;
}
.ld-card .ld-sub{
font-size: 13.5px; color: var(--ld-text-2); margin-bottom: 20px;
}
.ld-field{ margin-bottom: 14px; }
.ld-field label{
display:block; font-size: 12.5px; font-weight: bold; letter-spacing:.4px;
color:#3a424c; margin-bottom: 6px; text-transform: uppercase;
font-family: "Arial Narrow", Arial, sans-serif;
}
.ld-field input{
width:100%; height:44px; padding: 0 13px;
font: inherit; font-size: 15px; color: var(--ld-ink);
background:#fbfcfd; border:1px solid #d4dae1; border-radius:10px;
transition: border-color .18s, box-shadow .18s, background .18s;
}
.ld-field input:focus{
outline:none; background:#fff;
border-color: var(--ld-rot);
box-shadow: 0 0 0 3px rgba(238,36,45,.16);
}
.ld-row{
display:flex; align-items:center; justify-content:space-between;
margin: 4px 0 18px; font-size: 13px;
}
.ld-check{ display:flex; align-items:center; gap:7px; color:#3a424c; cursor:pointer; user-select:none; }
.ld-check input{ width:15px; height:15px; accent-color: var(--ld-rot); cursor:pointer; }
.ld-row a{ color: var(--ld-blau); text-decoration:none; font-weight:bold; }
.ld-row a:hover{ text-decoration:underline; }
/* Zusatz fuer die App: "Anmeldedaten merken" ist nur in der Desktop-App sichtbar
(initLogin blendet es ein). Damit der Link auch ohne Checkbox rechts bleibt. */
.ld-row a{ margin-left: auto; }
.ld-btn{
width:100%; height:47px; border:none; border-radius:10px; cursor:pointer;
font: inherit; font-size: 15.5px; font-weight: bold; letter-spacing:.4px; color:#fff;
background: linear-gradient(180deg, var(--ld-rot) 0%, var(--ld-rot-dunkel) 100%);
box-shadow: 0 8px 18px rgba(190,16,22,.30), inset 0 1px 0 rgba(255,255,255,.25);
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ld-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 11px 22px rgba(190,16,22,.34), inset 0 1px 0 rgba(255,255,255,.25); }
.ld-btn:active{ transform: translateY(1px); box-shadow: 0 4px 10px rgba(190,16,22,.28); }
.ld-btn:focus-visible{ outline:3px solid rgba(32,86,174,.5); outline-offset:2px; }
/* ---------- Fusszeile & Skip ---------- */
.ld-foot{
position:relative; z-index:6;
font-size: 12px; color:#8a919b; text-align:center;
opacity:0; transition: opacity .6s ease .15s;
}
.ld-foot.in{ opacity:1; }
.ld-foot button{
border:none; background:none; font:inherit; color:#8a919b;
text-decoration:underline; cursor:pointer; margin-left:10px;
}
.ld-foot button:hover{ color: var(--ld-blau); }
.ld-skip{
position:fixed; right:16px; bottom:14px; z-index:20;
font: inherit; font-size:12.5px; color:#6b7480;
background:rgba(255,255,255,.75); border:1px solid var(--ld-linie);
border-radius:999px; padding:7px 14px; cursor:pointer;
backdrop-filter: blur(4px);
transition: opacity .3s;
}
.ld-skip:hover{ color: var(--ld-ink); border-color:#c7cdd5; }
.ld-skip.hide{ opacity:0; pointer-events:none; }
/* ---------- Partikel-Canvas ---------- */
/* MUSS absolut ueber der Buehne liegen. Liegt es im Textfluss, schaukelt sich die
Buehnenhoehe auf (resize() setzt die Canvas-Groesse aus der Buehnengroesse). */
#ldFx{
position:absolute; inset:0; z-index:8;
/* width/height sind noetig: ein