/*
Theme Name: LCE Schreiner
Theme URI: https://lce-schreiner.at
Template: hello-biz
Author: Impact Marketing
Author URI: https://im-marketing.at
Description: Custom Theme
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready,style-variations
Version: 1.2.0.1769534952
Updated: 2026-01-27 17:29:12

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* ==================================
   LCE Kategorie – Premium Laser Card
   ================================== */

.mat-card{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  background: #1B1B1B;

  /* KEIN Movement */
  transform: none !important;

  transition:
    box-shadow 420ms cubic-bezier(.22,.61,.36,1);
}

/* --------------------
   Bild
   -------------------- */
.mat-card .mat-img{
  width: 100%;
  height: auto;
  display: block;

  /* ruhiger Premium-Zoom */
  transition: transform 1200ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* --------------------
   Text Overlay
   -------------------- */
.mat-card .mat-text{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;

  font-family: Oxanium, sans-serif;
  font-size: 48px;              /* wie gewünscht */
  letter-spacing: 0.1em;

  color: #F0F0F0;
  text-shadow:
    0 3px 10px rgba(0,0,0,0.55),
    0 0 18px rgba(0,0,0,0.35);

  pointer-events: none;
}

.mat-text--narrow{
	line-height: 1.1;   /* reduziert Zeilenabstand stark */
	letter-spacing: 0.08em; /* optional etwas enger */
	text-align: center;
	font-size: 37px !important;
}


/* --------------------
   Hover – Zoom
   -------------------- */
.mat-card:hover .mat-img{
  transform: scale(1.12);
}

/* --------------------
   Hover – Glow (wie Produktübersicht, aber Violet)
   -------------------- */
.mat-card:hover{
  box-shadow:
    /* feine harte Kante */
    0 0 0 1px rgba(128,75,165,0.9),

    /* Tiefe nach innen */
    inset 0 0 0 1px rgba(128,75,165,0.35),

    /* weicher Premium-Glow */
    0 0 18px rgba(128,75,165,0.65);
}



/* --------------------
   Gravur - Referenzen: Holz - Übersicht -> Smoother wechsel in die Einzelkategorien
   -------------------- */

[id^="holz-referenzen"]{
  animation: fadeIn .25s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}