/* Lenvar UI-Set · lenvar-ui.css
   Schriften nicht enthalten: Aldrich, Barlow, JetBrains Mono lokal per @font-face einbinden.
   Ohne diese Schriften greifen die Fallbacks in --lv-display, --lv-body, --lv-mono. */
/* ==========================================================
   Lenvar UI-Set · Kit-CSS · Präfix lv-
   Layout-Idee: harte Kanten mit abgeschnittener Klingenecke
   Dunkel zuerst (Schwarz/Rot), helle Variante automatisch
   ========================================================== */
:root{
  --lv-bg:#0b0b0c;
  --lv-surface:#141416;
  --lv-line:#2a2a2e;
  --lv-line-strong:#44444a;
  --lv-fg:#f2f2f0;
  --lv-muted:#9d9da4;
  --lv-red:#e01e2b;
  --lv-on-red:#ffffff;
  --lv-display:"Aldrich","Eurostile","Arial Narrow",sans-serif;
  --lv-body:"Barlow","Segoe UI",Arial,sans-serif;
  --lv-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --lv-cut:12px;
  --lv-ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --lv-bg:#f3f3f1;--lv-surface:#ffffff;--lv-line:#dcdcd8;--lv-line-strong:#b4b4af;
    --lv-fg:#0b0b0c;--lv-muted:#5d5d63;--lv-red:#c8101c;color-scheme:light;
  }
}
:root[data-theme="light"]{
  --lv-bg:#f3f3f1;--lv-surface:#ffffff;--lv-line:#dcdcd8;--lv-line-strong:#b4b4af;
  --lv-fg:#0b0b0c;--lv-muted:#5d5d63;--lv-red:#c8101c;color-scheme:light;
}

/* ---------- Buttons ---------- */
.lv-btn{
  --cut:var(--lv-cut);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:46px;padding:0 22px;border:0;
  background:var(--lv-red);color:var(--lv-on-red);
  font:500 15px/1 var(--lv-body);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%);
  transition:color .3s var(--lv-ease),transform .15s;
}
/* Füllung läuft beim Hover von links durch */
.lv-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--lv-fg);transform:translateX(-101%);
  transition:transform .4s var(--lv-ease);
}
.lv-btn:hover,.lv-btn:focus-visible{color:var(--lv-bg)}
.lv-btn:hover::before,.lv-btn:focus-visible::before{transform:none}
/* Fokusring liegt innen, weil clip-path außen abschneidet */
.lv-btn:focus-visible{outline:2px solid var(--lv-bg);outline-offset:-5px}
.lv-btn:active{transform:scale(.97)}
.lv-btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--lv-ease)}
.lv-btn:hover svg{transform:translateX(4px)}

/* Sekundär: Rahmen statt Fläche */
.lv-btn--line{background:var(--lv-line-strong);color:var(--lv-fg)}
.lv-btn--line::before{
  inset:1px;background:var(--lv-bg);transform:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut) + .6px),calc(100% - var(--cut) + .6px) 100%,0 100%);
}
.lv-btn--line:hover,.lv-btn--line:focus-visible{background:var(--lv-red);color:var(--lv-red)}
.lv-btn--line:focus-visible{outline-color:var(--lv-red)}

/* Text-Button: Unterstreichung wächst */
.lv-btn--ghost{
  background:none;clip-path:none;padding:0 2px;min-height:40px;color:var(--lv-fg);
  box-shadow:inset 0 -1px 0 var(--lv-line-strong);
}
.lv-btn--ghost::before{inset:auto 0 0 0;height:2px;background:var(--lv-red);transform:scaleX(0);transform-origin:left}
.lv-btn--ghost:hover,.lv-btn--ghost:focus-visible{color:var(--lv-fg)}
.lv-btn--ghost:focus-visible{outline-color:var(--lv-red);outline-offset:3px}

.lv-btn--sm{min-height:38px;padding:0 16px;font-size:13px;--cut:9px}
.lv-btn--icon{width:46px;padding:0}
.lv-btn[aria-busy="true"]{pointer-events:none}
.lv-spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lv-spin .7s linear infinite}
@keyframes lv-spin{to{transform:rotate(360deg)}}

/* ---------- Karten ---------- */
.lv-card{
  position:relative;display:flex;flex-direction:column;gap:12px;
  padding:22px 22px 28px;
  background:var(--lv-surface);color:var(--lv-fg);
  border:1px solid var(--lv-line);text-decoration:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--lv-cut) * 1.5),calc(100% - var(--lv-cut) * 1.5) 100%,0 100%);
  transition:transform .35s var(--lv-ease),border-color .35s;
}
/* Rote Kante: im Ruhezustand kurz, beim Hover voll */
.lv-card::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:var(--lv-red);transform:scaleX(.18);transform-origin:left;
  transition:transform .5s var(--lv-ease);
}
.lv-card:hover,.lv-card:focus-visible{transform:translateY(-4px);border-color:var(--lv-line-strong)}
.lv-card:hover::before,.lv-card:focus-visible::before{transform:none}
.lv-card:focus-visible{outline:2px solid var(--lv-red);outline-offset:-5px}
.lv-card__tag{font:500 12px/1 var(--lv-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lv-red)}
.lv-card__title{margin:0;font:400 22px/1.2 var(--lv-display);letter-spacing:.02em}
.lv-card__text{margin:0;font:400 15px/1.55 var(--lv-body);color:var(--lv-muted)}
.lv-card__more{
  display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;
  font:500 13px/1 var(--lv-body);letter-spacing:.1em;text-transform:uppercase;
}
.lv-card__more svg{width:16px;height:16px;transition:transform .3s var(--lv-ease)}
.lv-card:hover .lv-card__more svg{transform:translateX(5px)}

/* ---------- Scroll-Einblendungen ---------- */
/* Gilt nur, wenn das Skript läuft und keine reduzierte Bewegung gewünscht ist. */
.lv-js [data-rv]{
  opacity:0;
  transition:opacity .7s var(--lv-ease),transform .8s var(--lv-ease),clip-path .9s var(--lv-ease);
  transition-delay:calc(var(--i,0) * 90ms);
}
.lv-js [data-rv="up"]{transform:translateY(28px)}
.lv-js [data-rv="left"]{transform:translateX(-36px)}
.lv-js [data-rv="scale"]{transform:scale(.94)}
.lv-js [data-rv="blade"]{opacity:1;clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.lv-js [data-rv="line"]{opacity:1;transform:scaleX(0);transform-origin:left}
.lv-js [data-rv].lv-in{opacity:1;transform:none}
.lv-js [data-rv="blade"].lv-in{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}

@media (prefers-reduced-motion:reduce){
  .lv-btn,.lv-btn::before,.lv-card,.lv-card::before{transition:none}
  .lv-spin{animation-duration:2s}
}