/*
Theme Name: Huōn
Theme URI: https://huon.love/
Author: Daniel Kreth
Author URI: https://huon.love/
Description: A child theme of the Twenty Twenty-Five theme.
Tags:
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: huon

Huōn WordPress Theme 2024
*/

/*
	Schwarz		#010102	rgba(1, 1, 2, 1.0)
	Dunkelgrau	#2C262D	rgba(44, 38, 45, 1.0)
	Grau		#49444E	rgba(73, 68, 78, 1.0)
	Hellgrau	#FAF8FB	rgba(250, 248, 251, 1.0)
	Weiß		#FCFCFC	rgba(252, 252, 252, 1.0)
	Rosa		#FCB2FF	rgba(252, 178, 255, 1.0)
	Blau		#9799FC	rgba(151, 153, 252, 1.0)
	Dunkelblau	#444067	rgba(68, 64, 103, 1.0)
	Lila		#684C72	rgba(104, 76, 114, 1.0)
	Rot			#DA4453	rgba(218, 68, 83, 1.0)
	Op. Blau	#9799FC1F	rgba(151, 153, 252, 1.0)

	Gradient
	Background Blue		#444067	rgba(68, 64, 103, 1.0)
	Blau oben-rechts	#7e7fd3	rgba(126, 127, 211, 1.0)
	Rot unten-links		#b3344d	rgba(179, 52, 77, 1.0)
	Lila oben-links		#9c79b3	rgba(156, 121, 179, 1.0)

	Türkies		#8FF5D9	rgba(143, 245, 217, 1.0)
	Green		#9FFfbf	rgba(159, 255, 191, 1.0)
	Light Green	#E2FFFF	rgba(226, 255, 255, 1.0)
*/

/* -------------------------------------------------- */
/* Button Container for Centering */
.button-container {
    text-align: center;
}

/* Gradient Button Styles */
.gradient-button {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 500;
/*    color: white;*/
    text-decoration: none;
    border-radius: var(--border-radius-lg);

    background: radial-gradient(circle at top left, rgba(143, 245, 217, 0.9), transparent 50%),
                radial-gradient(circle at top right, rgba(159, 255, 191, 0.9), transparent 50%),
                radial-gradient(circle at bottom left, rgba(226, 255, 255, 0.9), transparent 50%),
                radial-gradient(circle at bottom right, rgba(143, 245, 217, 0.9), transparent 50%);

    background-size: 400% 400%; /* To enable animation */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    border: none;
    cursor: pointer;
    text-align: center;
    animation: gradient-shift 3s infinite;
}

/* Hover Effect */
.gradient-button:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

/* Animation for Gradient Movement */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* =======================================
	HEADER
	------- */


/* =======================================
	PRICING
	------- */
.price-block {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px 20px 20px 20px;
    border-radius: var(--border-radius-md);
    background: radial-gradient(circle at top left, rgba(143, 245, 217, 0.9), transparent 50%),
                radial-gradient(circle at top right, rgba(159, 255, 191, 0.9), transparent 50%),
                radial-gradient(circle at bottom left, rgba(226, 255, 255, 0.9), transparent 50%),
                radial-gradient(circle at bottom right, rgba(143, 245, 217, 0.9), transparent 50%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

/* Header Section */
.price-block .price-header {
    margin-bottom: 0px;
    padding: 0;
}

.price-block .price-title {
    font-size: 2rem;
    margin: 0 0 20px 0;
}

.price-block .price-subtitle {
    font-size: 1.5rem;
    margin: 0;
}

/* Price Section */
.price-block .price-value h2 {
    font-size: 2.5rem;
    font-weight: bold;
/*    color: #9c79b3;*/
    margin-bottom: 20px;
}

.price-block .price-features h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #34495E;
}

.price-block .price-value span {
    font-size: 0.5rem;
    font-weight: 300;
    color: #eee;
    margin: 0;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.feature-list li {
    font-size: 1rem;
    color: #2C3E50;
    margin: 5px 0;
}

.feature-list i {
    color: #16A085;
    margin-right: 8px;
}

/* Button Section */
.price-button .btn {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 20px;
    font-size: 1rem;
    color: #fff;
    background-color: #16A085;
    border: none;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.price-button .btn:hover {
    background-color: #1ABC9C;
}

/* Hidden product text */
.hidden-content {
    display: none; /* Versteckt den Inhalt */
    margin-top: 1rem;
    transition: max-height 0.3s ease-out;
}

.hidden-content.visible {
    display: block; /* Zeigt den Inhalt an */
}

.read-more-btn {
    margin-top: 1rem;
    background-color: #6c63ff;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.read-more-btn:hover {
    background-color: #4c48d9;
}