/* ---------------------------------------------------------------
1. Label Button
--------------------------------------------------------------- */

/* BIG BUTTTON
 * "Panel" Element verwenden
 Text in das "TITLE" Feld eintragen
 Im Feld Advanced / CSS die Farben für Standard und Mouseover/Hover wie folgt definieren:

	.el-element {
	--bg1: rgba(255,255,0,0.4);
	--txt1: #ff00ff;
	--bg2: rgba(0,255,255,0.3);
	--txt2: #0000ff;
	}

 *
 */

.big-button {
/* Standardfarben */
--bg1x: rgba(204,153,50,0.8);
--txt1x: #fff;
--bg2x: rgba(204,153,50,0.9);
--txt2x: #fff;
/* 
 * Drehung */
--rot1: -15deg;
--rot2: 0deg;
/* 
 * Grössen, Faktor medium, small */
--size: 200px;
--scale-m: 0.7;
--scale-m-hover: 0.8;
--scale-s: 0.7;
--scale-s-hover: 0.8;
}
.big-button {
aspect-ratio: 1 / 1;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: var(--size);
max-width: var(--size);
height: auto;
text-align: center;
border-radius: 500px;
transform: rotate(var(--rot1)) perspective(400px) translate3d(0, 0, 0) scale(1);
transition: all 200ms ease;
box-sizing: border-box;
background: var(--bg1, var(--bg1x));
box-shadow: 0 0 30px rgba(255,255,255,.8);
}
.big-button * {
color: var(--txt1, var(--txt1x));
}
.big-button.shadow {
box-shadow: 0 0 30px rgba(0,0,0,0.02);
}
.big-button:hover {
transform: rotate(var(--rot2)) perspective(500px) translate3d(0, 0, 30px);
background: var(--bg2, var(--bg2x));
color: var(--txt1, var(--txt1x));
}
.big-button:hover * {
color: var(--txt2, var(--txt2x));
}
@media screen and (max-width: 960px) {
    .big-button {
    transform: rotate(var(--rot1)) perspective(var(--size)) translate3d(0, 0, 0) scale(var(--scale-m));
    }
    .big-button:hover {
    transform: rotate(var(--rot2)) perspective(var(--size)) translate3d(0, 0, 0) scale(var(--scale-m-hover));
    }
}
@media screen and (max-width: 600px) {
    .big-button {
    transform: rotate(var(--rot1)) perspective(var(--size)) translate3d(0, 0, 0) scale(var(--scale-s));
    }
    .big-button:hover {
    transform: rotate(var(--rot2)) perspective(var(--size)) translate3d(0, 0, 0) scale(var(--scale-s-hover));
    }
}