@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600&display=swap');

.wp-block-buttons{ gap:14px; }

/* Zwei Ebenen wie bei den Hero-Buttons und dem Menueschalter: das Element
   selbst traegt den Goldverlauf, das ::before liegt einen Pixel innen darueber
   und bildet die Flaeche. Beide mit derselben Abschraegung beschnitten - so
   entsteht die haarfeine Kante, die der Schraege folgt. Ein border kann das
   nicht, der ignoriert clip-path.
   Das ::before braucht z-index:-1, damit der Text darueber bleibt; damit das
   nicht hinter dem eigenen Hintergrund verschwindet, macht
   position:relative + z-index:0 aus dem Button einen eigenen Stapelraum. */
.wp-block-button .wp-block-button__link{
	--cut:9px;
	position:relative; z-index:0; isolation:isolate;
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:12px 24px; border:0; border-radius:0; box-shadow:none;
	font:600 10px/1 'Space Grotesk',sans-serif; letter-spacing:.2em;
	text-transform:uppercase; text-decoration:none; white-space:nowrap;
	cursor:pointer;
	clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	transition:transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease;
}
.wp-block-button .wp-block-button__link::before{
	content:''; position:absolute; inset:1px; z-index:-1;
	clip-path:polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px));
	transition:background .35s ease;
}
/* Lichtreflex laeuft beim Darueberfahren durch die Flaeche.
   Wird vom clip-path des Buttons sauber abgeschnitten. */
.wp-block-button .wp-block-button__link::after{
	content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
	transform:translateX(-180%) skewX(-18deg);
	transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.wp-block-button .wp-block-button__link:hover{ transform:translateY(-2px); }
.wp-block-button .wp-block-button__link:hover::after{ transform:translateX(340%) skewX(-18deg); }
.wp-block-button .wp-block-button__link:focus{ outline:none; }
.wp-block-button .wp-block-button__link:focus-visible{ outline:1px dashed rgba(212,175,55,.75); outline-offset:5px; }

/* Variante 1 (Standard): gefuellte Goldflaeche, dunkle Schrift.
   Kein drop-shadow als Hervorhebung - Filter greifen vor dem Beschnitt,
   der Schein wuerde vom clip-path wieder weggeschnitten. Stattdessen wird
   der Rand kraeftiger, das ist die Standard-Hervorhebung im Baukasten. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
	background:linear-gradient(135deg, rgba(255,246,214,.9), rgba(212,175,55,.5) 55%, rgba(255,246,214,.75));
	color:#0a0a0a;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::before{
	background:linear-gradient(120deg,#b38728 0%,#f5e6a8 24%,#d4af37 50%,#fcf6ba 74%,#b38728 100%);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::after{
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
	color:#0a0a0a;
	background:linear-gradient(135deg,#fff8e2, rgba(240,216,121,.9) 55%, #fff8e2);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before{
	background:linear-gradient(120deg,#d4af37 0%,#fcf6ba 24%,#f0d879 50%,#fff8e2 74%,#d4af37 100%);
}

/* Variante 2 (Editor-Stil "Outline"): dunkle Flaeche mit Goldkante.
   border:0 raeumt den 2px-Rahmen ab, den WordPress diesem Stil mitgibt -
   sonst waere der Button hoeher als der gefuellte daneben. */
.wp-block-button.is-style-outline .wp-block-button__link{
	background:linear-gradient(135deg, rgba(212,175,55,.85), rgba(212,175,55,.22) 55%, rgba(212,175,55,.7));
	color:#f5f0e8;
	border:0; padding:12px 24px;
}
.wp-block-button.is-style-outline .wp-block-button__link::before{ background:rgba(8,8,8,.9); }
.wp-block-button.is-style-outline .wp-block-button__link::after{
	background:linear-gradient(90deg, transparent, rgba(255,244,214,.28), transparent);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
	color:#d4af37;
	background:linear-gradient(135deg, rgba(212,175,55,1), rgba(240,216,121,.5) 55%, rgba(212,175,55,.9));
}
.wp-block-button.is-style-outline .wp-block-button__link:hover::before{ background:rgba(14,12,6,.92); }

@media (max-width:860px){
	.wp-block-buttons{ gap:12px; }
	.wp-block-button .wp-block-button__link,
	.wp-block-button.is-style-outline .wp-block-button__link{
		--cut:7px; padding:11px 18px; letter-spacing:.16em;
	}
}
@media (hover: none){
	.wp-block-button .wp-block-button__link:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
	.wp-block-button .wp-block-button__link,
	.wp-block-button .wp-block-button__link::before,
	.wp-block-button .wp-block-button__link::after{
		transition-duration:.01s !important; transition-delay:0s !important;
	}
}