:root {
	--hoou-grau: #c3ccd2;
	--hoou-grau-300: #d7dde1;
	--hoou-grau-600: #b1babf;
	--hoou-grau-800: #6b7074;
	--hoou-hellgrau: #e8ebef;
	--hoou-weiss: #ffffff;
	--hoou-blau: #1e1c39;
	--hoou-extrablau: #7a91c1; 
	--hoou-button-border: none;  /* Add this to fix the undefined variable*/
	--hoou-button-transition-in:   background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, outline-color 0.2s ease-in-out, outline-offset 0.2s ease-in-out;
	--transition-btn-out: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, outline-color 0.4s ease-in-out, outline-offset 0.4s ease-in-out;
}

/*! Base Button */
a.hoou-button,
.hoou-button {
	display: inline-flex;
	padding: 16px 40px;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 8px;
	border-radius: 6px;
	border: var(--hoou-button-border, none);
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.3px;
	outline: none;
	transition: var(--transition-btn-out);
	cursor: pointer;
	text-decoration: none;
	box-shadow: unset;


	--hoou-button-text-default: currentColor;
	--hoou-button-text-hover: currentColor;
	--hoou-button-text-focus: currentColor;
	--hoou-button-text-active: currentColor;
	--hoou-button-text-disabled: var(--hoou-grau-800);

	--hoou-button-surface-default: transparent;
	--hoou-button-surface-hover: transparent;
	--hoou-button-surface-focus: transparent;
	--hoou-button-surface-active: transparent;
	--hoou-button-surface-disabled: var(--hoou-hellgrau);

	--hoou-button-focus-ring: var(--hoou-extrablau);

	--hoou-icon-size: 24px;

	color: var(--hoou-button-text-default);
	background: var(--hoou-button-surface-default);
}

/*! States */
@media (hover: hover) and (pointer: fine) {
	.hoou-button:hover {
		color: var(--hoou-button-text-hover);
		background: var(--hoou-button-surface-hover);
		transition: var(--hoou-button-transition-in);
		text-decoration: none;
		font-weight: 600;
	}
}

.hoou-button:focus-visible {
	color: var(--hoou-button-text-hover);
	background: var(--hoou-button-surface-hover);
	outline: 2px solid var(--hoou-button-focus-ring);
	outline-offset: 2px;
}

.hoou-button:active{
	color: var(--hoou-button-text-active);
	background: var(--hoou-button-surface-active);
	transition: var(--hoou-button-transition-in);
}

.hoou-button:disabled {
	color: var(--hoou-button-text-disabled);
	background: var(--hoou-button-surface-disabled);
	cursor: default;
	transition: var(--hoou-button-transition-in);
}

/*! Tertiary (Light) */
.hoou-button.tertiary {
	--hoou-button-text-default: var(--hoou-blau);
	--hoou-button-text-hover: var(--hoou-blau);
	--hoou-button-text-active: var(--hoou-blau);
	--hoou-button-text-disabled: var(--hoou-grau-800);

	--hoou-button-surface-default: var(--hoou-grau);
	--hoou-button-surface-hover: var(--hoou-grau-300);
	--hoou-button-surface-active: var(--hoou-grau-600);
	--hoou-button-surface-disabled: var(--hoou-hellgrau);

	--hoou-button-focus-ring: var(--hoou-blau);
}


/*! Tertiary (Dark) */
.hoou-dark-background {
	&,
	& > *{
		> .hoou-button.tertiary {
			--hoou-button-focus-ring: var(--hoou-weiss);
		}
	}
}

/*! Size System (Large / Medium) */
/* Large (default) */
.hoou-button {
	padding-top: 16px;
	padding-bottom: 16px;
	padding-left: 40px;
	padding-right: 40px;
}

/* Medium */
.hoou-button.is-medium {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 16px;
	padding-right: 16px;
	line-height: 20px;
	--hoou-icon-size: 20px;
}


/*! Icon Layout (Left / Right / Only) */
/* Icon right (default .icons-enabled) */
.hoou-button.icons-enabled {
	padding-right: 28px;   /* Large: 28; Medium bleibt 16 (s.u. Override) */
	padding-left: 40px;
}

/* Medium overrides for icon paddings */
.hoou-button.is-medium.icons-enabled {
	padding-right: 16px;
	padding-left: 16px;
}

.hoou-button.icons-enabled::before,
.hoou-button.icons-enabled i::before,
.hoou-button.icons-enabled svg,
.hoou-button.icon-only::before,
.hoou-button.icon-only i::before,
.hoou-button.icon-only svg {
	width: var(--hoou-icon-size, 24px);
	height: var(--hoou-icon-size, 24px);
	display: inline-block;
	flex: 0 0 var(--hoou-icon-size, 24px);
	vertical-align: top;
	
}

.hoou-button svg {
	width: var(--hoou-icon-size);
	height: var(--hoou-icon-size);
	fill: none;
	stroke: currentColor;
}

.peertube-placeholder:has(+ .hoouButtonOuterWrap),
.tiny_caption_result:has(+ .hoouButtonOuterWrap) {
	margin-bottom: 16px;
}

.hoou-download-button::before {
	content: none;
}

/*! Mobile Fullwidth */
@media only screen and (max-width: 575px) {
	.hoou-button.tertiary:not(.icon-only) {
		width: 100%;
	}
}

/*Additional Styles from the  wordpress-shortcodes plugin*/
div.hoouButtonOuterWrap {
    width: 100%;
}

div.hoouButtonInnerWrap {
    text-align:center;
    margin:auto;
    display:inline-block;
}

@media screen and (max-width: 768px) {
	div.hoouButtonOuterWrap:has(a.float-right) {
		text-align: center;
	}

    body .hoouButtonInnerWrap {
        width: calc(100vw - 80px);
        padding-left: 0;
        padding-right: 0;
        /*padding-top: 21px; used this comment to keep the code the same like in the original repo*/
    }
}

@media screen and (min-width: 769px) {

    body .hoouButtonInnerWrap {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        /*padding-top: 36px; used this comment to keep the code the same like in the original repo*/
    }
}