/* CSS // PAULA'S GARDEN // 26.05.2025 // erstellt von Daniel Petermann-Fallis */

	@font-face {
		font-family: 'Outfit';
		src: url('fonts/Outfit-VariableFont_wght.woff2') format('woff2');
		font-display: swap;
	}

/*  ========================================
	CSS VARIABELN
	========================================== */

	:root {
	--color-green-dark: #08312A;
	--color-green-active: #00E47C;
	--color-green-print: #8ec899;
	--color-yellow: #FFEA3C;
	--color-text-light: #E5E3ED;
	--color-background-light: #F6F5F3;
	--color-white: #ffffff;
	
	--font-family-primary: 'Outfit', sans-serif;
	--font-size-large: 1.3em;
	
	--spacing-xs: 4px;
	--spacing-sm: 8px;
	--spacing-md: 12px;
	--spacing-lg: 20px;
	--spacing-xl: 40px;
	--spacing-xxl: 60px;
	
	--border-radius-sm: 5px;
	--border-radius-md: 10px;
	--border-radius-lg: 24px;
	--border-radius-xl: 56px;
	
	--max-width-content: 1000px;
	--max-width-narrow: 800px;
	}

/*  ========================================
	BASIS STIL & RESETS
	========================================== */

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	body {
		font-family: var(--font-family-primary);
		background-color: var(--color-green-dark);
		color: var(--color-green-active);
		line-height: 1.6;
		hyphens: auto;
	}
	
	img {
		max-width: 100%;
		height: auto;
		display: block;
	}
	
	a {
	text-decoration: none;
	color: inherit;
	}

/*  ========================================
	TYPO
	========================================== */

	h1, h2, h3, h4 {
	font-family: var(--font-family-primary);
	line-height: 1.2;
	margin-bottom: var(--spacing-md);
	}
	
	h1 { 
		font-size: 2.4em;
		font-weight: 700; 
	}
	
	h2 {
		font-size: 2em;
		font-weight: 600;
	}
	
	h3 {
		font-size: 1.8em;
		font-weight: 600;
	}
	
	h4 {
		font-size: 1.6em;
		font-weight: 500;
	}
	
	hr { 
		border-top: 1px solid var(--color-green-dark);
		border-bottom: 0px solid transparent;
	}
	
	p, span {
		font-size: 1.2em;
		margin: 0;
	}

/*  ========================================
	LAYOUT
	========================================== */

	main {
		display: grid;
		max-width: var(--max-width-content);
		margin: 100px auto 0;
	}
	
	section {
		padding: 0 var(--spacing-lg);
	}
	
	section p {
		color: var(--color-text-light);
		font-weight: 400;
		line-height: 1.4;
		margin-bottom: var(--spacing-md);
	}
	
	footer {
		max-width: var(--max-width-content);
		margin: 0 auto;
		padding: var(--spacing-lg);
	}

/*  ========================================
	HEADER / NAVIGATION
	========================================== */

	.logo {
		max-width: 156px;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}
	
	.banner {
		max-width: 1366px;
		margin: 0 auto;
		display: block;
	}
	
	.headline {
		position: relative;
	}
	
	.headline h1 {
		
		text-align: center;
		color: var(--color-green-dark);
		padding-top: var(--spacing-lg);
		background-color: var(--color-green-active);
		position: relative;
		z-index: 5;
	}
	
	.headline img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

/*  ========================================
	ANPASSUNGEN
	========================================== */

	.align-right {
		text-align: right;
	}
	
	.align-center { 
		text-align: center;
		max-width: 64ch;
		margin: 0 auto;
	}
	
	.uppercase { 
		text-transform: uppercase; 
	}
	
	.visibility-hidden {
		visibility: hidden;
	}
	
	.mt-lg { 
		margin-top: var(--spacing-lg);
	}
	
	.mt-xl { 
		margin-top: var(--spacing-xl);
	}
	
	.mb-lg { 
		margin-bottom: var(--spacing-lg);
	}
	
	.m-pflichtfeld {
		margin-top: var(--spacing-md); 
		margin-left: 24px;
	}  
	
	.pt-lg {
		padding-top: var(--spacing-lg);
	}
	
	.pt-xxl { 
		padding-top: 150px;
	}

	/* Viewport jenseits von 1900px. Nur für den Fall der Fälle */
	@media screen and (min-width:1900px) {
		.pt-xxl {
			padding-top: 250px;
		}
	}

/*  ========================================
	BUTTONS
	========================================== */

	.btn {
		display: inline-block;
		padding: var(--spacing-md) var(--spacing-lg);
		font-size: 1rem;
		font-family: var(--font-family-primary);
		background-color: var(--color-green-active);
		color: var(--color-green-dark);
		text-transform: uppercase;
		border-radius: var(--border-radius-sm);
		border: 2px solid var(--color-green-active);
	}
	
	.btn:hover {
		background-color: var(--color-green-dark);
		color: var(--color-green-active);
	}
	
	.btn.back {
		background-color: var(--color-green-dark);
		color: var(--color-yellow);
		border-color: var(--color-yellow);
	}
	
	.btn.back:hover {
		background-color: var(--color-yellow);
		color: var(--color-green-dark);
	}
	
	.btn.grey {
		background-color: var(--color-text-light);
		color: var(--color-green-dark);
		border-color: var(--color-white);
	}
	
	.btn-block {
		display: block;
		width: 100%;
	}
	
	.btn-buy {
		background-color: var(--color-green-dark);
		color: var(--color-white);
		border: 0px solid transparent;
	}
	
	.btn-buy:active,
	.btn-buy:hover {
		background-color: black;
		color: var(--color-white);
	}
	
	.fixed-button {
		position: fixed;
		bottom: 50px;
		left: 50px;
		padding: var(--spacing-md) 24px;
		font-size: 16px;
		background-color: var(--color-green-active);
		color: var(--color-white);
		border: none;
		border-radius: var(--border-radius-sm);
		z-index: 1000;
	}
	
	.home-button {
		position: fixed;
		bottom: 50px;
		left: 50px;
		width: 48px;
		height: 64px;
		padding-top: var(--spacing-lg);
	}

/*  ========================================
	BOXEN
	========================================== */
	
	.box {
		background-color: var(--color-yellow);
		border-radius: var(--border-radius-xl);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 240px;
	}
	
	.box h2 {
		font-size: 20px;
		text-align: center;
		color: #0E2A24;
		padding: var(--spacing-md) var(--spacing-lg);
	}
	
	.box img {
		height: 100px;
		margin: 0 auto;
		padding-top: 32px;
	}
	
	.icon-page {
		height: 64px;
		margin: 0 auto;
		margin-bottom: var(--spacing-xl);
	}

	.non-active {
		background-color: #75A394;
		opacity: 0.5;
	}
	
	.non-active img,
	.non-active h2 {
		opacity: 0.5;
	}

/*  ========================================
	CARDS (z.B. ANGEBOT)
	========================================== */

	.card {
		display: flex;
		background-color: var(--color-background-light);
		border-radius: var(--spacing-md);
	}
	
	.card img {
		width: 28%;
		height: auto;
		object-fit: cover;
		flex-shrink: 0;
		border-radius: var(--spacing-md) 0 0 var(--spacing-md);
	}
	
	.card-img {
		border-radius: var(--spacing-sm)!important;
		border: 1px solid var(--color-green-dark);
		margin-top: var(--spacing-lg);
		margin-right: var(--spacing-md);
	}
	
	.card-text {
		padding: var(--spacing-lg);
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: var(--color-green-dark);
		flex: 1;
	}
	
	.card-text h2 {
		font-size: 1.2em;
		margin: 0 0 var(--spacing-md) 0;
		color: var(--color-green-dark);
	}
	
	.card-text p {
		font-size: 0.9rem;
		line-height: 1.4;
		color: var(--color-green-dark);
		margin: 0 0 var(--spacing-md) 0;
	}
	
	.card-text .preis {
		font-weight: bold;
		font-size: 1.4em;
		margin-top: auto;
	}

/*  ========================================
	ACCORDION
	========================================== */

	.accordion {
		width: var(--max-width-narrow);
		margin: var(--spacing-xxl) auto;
		padding: 0 var(--spacing-lg);
	}
	
	.accordion details {
		background-color: var(--color-background-light);
		border-radius: var(--border-radius-md);
		margin-bottom: var(--spacing-lg);
		padding: var(--spacing-md) var(--spacing-lg);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		color: var(--color-green-dark);
	}
	
	.accordion summary {
		font-size: 1.4em;
		color: var(--color-green-dark);
		font-weight: 500;
		cursor: pointer;
		list-style: none;
		position: relative;
		padding-right: 30px;
	}
	
	.accordion summary::marker {
		display: none;
	}
	
	.accordion summary::after {
		content: "+";
		position: absolute;
		top: 0;
		right: 0;
		font-size: 1em;
		color: var(--color-green-active);
		transition: transform 0.3s ease;
	}
	
	.accordion details[open] summary::after {
		content: "−";
		transform: rotate(180deg);
	}
	
	.accordion p {
		margin: var(--spacing-sm) 0;
		color: var(--color-green-dark);
	}
	
	.accordion a.btn {
		display: inline-block;
		margin-top: var(--spacing-md);
		background-color: var(--color-green-active);
		color: var(--color-green-dark);
		padding: var(--spacing-sm) 16px;
		border-radius: var(--border-radius-sm);
		font-weight: bold;
	}
	
	.accordion a.btn:hover {
		background-color: var(--color-green-dark);
		color: var(--color-green-active);
	}

/*  ========================================
	GENERATOR
	========================================== */

	#GEN {
		color: var(--color-green-dark);
	}
	
	#GEN .grid {
		grid-template-columns: 3fr 2fr;
		gap: var(--spacing-lg);
		align-items: start;
	}
	
	#GEN #vorschau {
		background-color: var(--color-background-light);
		color: var(--color-green-active);
		background-image: url('img/motiv-1.webp');
		background-size: cover;
		aspect-ratio: 420/297;
		border-radius: var(--border-radius-md);
		display: flex;
		flex-direction: column;
		gap: var(--spacing-lg);
		justify-content: center;
		padding-top: 48%;
		padding-left: 18%;
		line-height: .7;
	}
	
	#step-1 label {
		border: 3px solid transparent;
	}
	
	#step-1 label.active {
		background-color: var(--color-green-active);
		border: 3px solid var(--color-green-active);
	}
	
	#GEN #anpassung {
		background-color: var(--color-background-light);
		padding: var(--spacing-md);
		padding-right: 18px;
		border-radius: var(--border-radius-md);
	}
	
	#GEN #anpassung button {
		grid-column: 1/-1;
		margin-top: 1em;
	}
	
	#GEN #anpassung h4 {
		grid-column: 1/-1;
	}
	
	/* Generator Steps */
	#GEN #step-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-md);
	}
	
	#GEN #step-1 input {
		display: none;
	}
	
	#GEN #step-1 span {
		font-size: 0.9em;
	}
	
	#GEN #step-2 {
		display: none;
	}
	
	#GEN #step-2 input,
	#GEN #step-3 input {
		padding: var(--spacing-sm);
		font-family: var(--font-family-primary);
		font-size: 1rem;
		margin: var(--spacing-xs);
		accent-color: var(--color-green-dark);
		border-radius: var(--spacing-md);
		border: 2px solid var(--color-green-active);
	}
	
	#GEN #step-2 #input-name {
		margin: 5px 0 var(--spacing-lg) 0;
		width: 100%;
	}
	
	#GEN #step-2 #wunschbetrag {
		margin: 5px 0 var(--spacing-lg) 6px;
		width: 60px;
	}
	
	#GEN #step-3 {
		display: none;
	}
	
	#GEN #step-3 p {
		font-size: 0.8rem;
		color: var(--color-green-dark);
		line-height: 1.2;
	}
	
	#step-3 label {
		display: grid;
		margin: 6px 0;
	}
	
	#step-3 input[type="text"],
	#step-3 input[type="number"] {
		font-size: 1em;
		border: 2px solid var(--color-green-active);
		border-radius: var(--border-radius-sm);
		background-color: var(--color-white);
		color: var(--color-green-dark);
	}
	
	#step-3 input[type="checkbox"] {
		accent-color: var(--color-green-active);
		margin-top: var(--spacing-xs);
	}
	
	#GEN #step-3 .datenschutz {
		display: grid;
		grid-template-columns: 20px 1fr;
		gap: 5px;
		align-items: baseline;
	}
	
	#GEN #step-3 input {
		width: 100%;
		box-sizing: border-box;
	}
	
	#GEN #step-3 .str-hnr{
		display: grid;
		grid-template-columns: 3fr 1fr;
		gap:10px;
	}
	
	#GEN #step-3 .plz-ort{
		display: grid;
		grid-template-columns: 2fr 3fr;
		gap:10px;
	}
	
	
/*  ========================================
	POPUP
	========================================== */

	#popup {
		background-color: rgba(0, 0, 0, 0.5);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px); /* Safari Support */
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: none;
		justify-content: center;
		align-items: center;
		z-index: 9999;
	}
	
	#popup div {
		background-color: var(--color-background-light);
		color: var(--color-green-dark);
		padding: var(--spacing-lg) var(--spacing-xl);
		max-width: 50ch;
		margin: 0 auto;
		border-radius: var(--border-radius-lg);
	}

/*  ========================================
	GRID
	========================================== */
	
	.grid {
		display: grid;
		max-width: 1300px;
		margin: 0 auto;
	}
	
	.grid-3 {
		display: grid;
		max-width: var(--max-width-narrow);
		gap: var(--spacing-xl);
		margin: 0 auto;
		grid-template-columns: 1fr 1fr;
	}
	
	@media screen and (min-width:768px) {
		.grid-3 {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	
	.grid-lovestory {
		display: grid;
		max-width: var(--max-width-content);
		gap: var(--spacing-xl);
		margin: 0 auto;
		padding: var(--spacing-lg);
		grid-template-columns: 1fr 30%;
	}
	
	.grid-lovestory p {
		font-size: 1.4em;
	}
	
	.grid-card {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-lg);
		max-width: var(--max-width-content);
		margin: var(--spacing-xl) auto 0;
		padding: 0 var(--spacing-lg);
	}