@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600|Raleway:500,700,800");
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Raleway:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cardo:wght@400;700&display=swap');

/*
	Slate by Pixelarity
	pixelarity.com | hello@pixelarity.com
	License: pixelarity.com/license
*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

img { max-width: 100%; height: auto; }

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	body {
		background: #fff;
	}

		body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

	body {
		background-color: #fff;
		color: #444;
	}

	body, input, select, textarea {
		font-family: "Open Sans", Helvetica, sans-serif;
		color: #093956;
		font-size: 13.5pt;
		font-weight: 400;
		line-height: 1.85em;
	        text-align: justify;
	        hyphens: auto;
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 11pt;
			}

		}


em, i{
  font-style: italic;
  color: #7a4dd8;
  letter-spacing: 0.02em;
}


	p {
		margin: 0 0 2em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 700;
		line-height: 1em;
		margin: 0 0 1.5em 0;
		padding-bottom: 1.25em;
		position: relative;
		text-transform: uppercase;
	}

		h1:after, h2:after, h3:after, h4:after, h5:after, h6:after {
			bottom: 0;
			content: '';
			display: inline-block;
			left: 0;
			position: absolute;
			width: 3rem;
		}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			border-bottom: 0;
			color: inherit;
			text-decoration: none;
		}

		h1.alt, h2.alt, h3.alt, h4.alt, h5.alt, h6.alt {
			margin: 0 0 1em 0;
			padding-bottom: 0;
		}

			h1.alt:after, h2.alt:after, h3.alt:after, h4.alt:after, h5.alt:after, h6.alt:after {
				display: none;
			}

	h2 {
		font-size: 1.25em;
		line-height: 1.25em;
	}


	h5 {
		font-size: 0.9em;
		line-height: 1.5em;
	}

	h6 {
		font-size: 0.7em;
		line-height: 1.5em;
	}

	@media screen and (max-width: 736px) {

		h2 {
			line-height: 1.5em;
		}

	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px;
		font-style: italic;
		margin: 0 0 2em 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		border: solid 1px;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	hr {
		border: 0;
		border-bottom: solid 1px;
		margin: 2em 0;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

	input, select, textarea {
		color: #444;
	}

	a {
		color: #444;
	}

	strong, b {
		color: #444;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #444;
	}

	blockquote {
		border-left-color: #e6e6e6;
	}

	code {
		background: #f6f6f6;
		border-color: #e6e6e6;
	}

hr {
    border: none;
    height: 2px;
    margin: 3rem 0;
    background: linear-gradient(
        to right,
        #f8d7ff,
        #e6c8ff,
        #ffd6f6
    );
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(230, 200, 255, 0.4);
}

.note-ref {
    font-size: 0.75em;
    vertical-align: super;
    color: #999;
    margin-left: 0.15em;
}

.note {
    font-size: 0.85em;
    color: #777;
    margin-top: 0.75rem;
    line-height: 1.4;
}

.note-symbol {
    margin-right: 0.25em;
    color: #999;
}

strong, b{
  font-weight: 650;
  color: #7f69c6;
}


h3 {
	font-family: "Raleway", sans-serif;
	font-weight: 600;
	font-size: 1.6em;
	line-height: 1.4em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #7a4fa3; /* Sailor-Lavendel */
}

h4 {
	font-family: "Raleway", sans-serif;
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1.4em;
	letter-spacing: 0.055em;
	text-transform: uppercase;

	background: linear-gradient(
		90deg,
		#e7a1bb,   /* softes Rosé */
		#f1b28c    /* zartes Peach / leicht orange */
	);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}



/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.5em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.5em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.5em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.5em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -1em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 1em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -1em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 1em;
				}

		.row {
			margin-top: 0;
			margin-left: -2em;
		}

			.row > * {
				padding: 0 0 0 2em;
			}

			.row.gtr-uniform {
				margin-top: -2em;
			}

				.row.gtr-uniform > * {
					padding-top: 2em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -3em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 3em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -3em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 3em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -4em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 4em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -4em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 4em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -1em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 1em;
						}

				.row {
					margin-top: 0;
					margin-left: -2em;
				}

					.row > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-uniform > * {
							padding-top: 2em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 3em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -4em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 4em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -4em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 4em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.375em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.375em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.375em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.375em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.75em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.75em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.75em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.75em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -2.25em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 2.25em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -2.25em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 2.25em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -3em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 3em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -3em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 3em;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

		@media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.3125em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.3125em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.3125em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.3125em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.625em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.625em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.625em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.625em;
						}

				.row {
					margin-top: 0;
					margin-left: -1.25em;
				}

					.row > * {
						padding: 0 0 0 1.25em;
					}

					.row.gtr-uniform {
						margin-top: -1.25em;
					}

						.row.gtr-uniform > * {
							padding-top: 1.25em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.875em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.875em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.875em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.875em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2.5em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2.5em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2.5em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2.5em;
						}

		}

/* Box */

	.box {
		border: solid 1px;
		margin-bottom: 2em;
		padding: 1.5em;
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			padding: 0;
		}

	.box {
		border-color: #e6e6e6;
	}


/* Features */

	.features {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		position: relative;
	}

		.features > section {
			width: calc(33.33333333% - 5em);
		}

			.features > section:before {
				content: '';
				display: block;
				height: 100%;
				margin-left: -3.75em;
				position: absolute;
				top: 0;
				width: 1px;
			}

			.features > section:first-child {
				border-left: 0;
			}

				.features > section:first-child:before {
					display: none;
				}

		@media screen and (max-width: 1280px) {

			.features > section {
				width: calc(33.33333333% - 2.5em);
			}

				.features > section:before {
					margin-left: -2em;
				}

		}

		@media screen and (max-width: 980px) {

			.features {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.features > section {
					width: 100%;
				}

					.features > section:before {
						width: 100%;
						height: 1px;
						margin-left: 0;
						position: relative;
						top: -3em;
					}

					.features > section:first-child:before {
						display: none;
					}

		}

		@media screen and (max-width: 736px) {

			.features > section:before {
				top: -2.5em;
			}

		}

	.features > section:before {
		background-color: #e6e6e6;
	}

/* Form */

	form {
		margin: 0 0 2em 0;
	}

	label {
		display: block;
		margin: 0 0 0.5em 0;
		text-transform: uppercase;
		font-size: 0.9em;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 700;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		border: none;
		border: solid 1px;
		border-radius: 0;
		background-color: transparent;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		input[type="search"]:invalid,
		input[type="url"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

	select {
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			cursor: pointer;
			display: inline-block;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
			font-size: 1em;
			font-family: "Open Sans", Helvetica, sans-serif;
			font-weight: 400;
			text-transform: none;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				border: solid 1px;
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			content: '\f00c';
		}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		opacity: 1.0;
	}

	:-moz-placeholder {
		opacity: 1.0;
	}

	::-moz-placeholder {
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		opacity: 1.0;
	}

	label {
		color: #444;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	select,
	textarea {
		-moz-transition: border-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out;
		border-color: #e6e6e6;
	}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		input[type="search"]:focus,
		input[type="url"]:focus,
		select:focus,
		textarea:focus {
			border-color: #444;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e6e6e6' /%3E%3C/svg%3E");
	}

		select option {
			color: #444;
			background: #fff;
		}

	input[type="checkbox"] + label,
	input[type="radio"] + label {
		color: #444;
	}

		input[type="checkbox"] + label:before,
		input[type="radio"] + label:before {
			-moz-transition: border-color 0.2s ease-in-out;
			-webkit-transition: border-color 0.2s ease-in-out;
			-ms-transition: border-color 0.2s ease-in-out;
			transition: border-color 0.2s ease-in-out;
			background: #f6f6f6;
			border-color: #e6e6e6;
		}

	input[type="checkbox"]:checked + label:before,
	input[type="radio"]:checked + label:before {
		background-color: #444;
		border-color: #444;
		color: #fff;
	}

	input[type="checkbox"]:focus + label:before,
	input[type="radio"]:focus + label:before {
		border-color: #444;
	}

	::-webkit-input-placeholder {
		color: #bbb !important;
	}

	:-moz-placeholder {
		color: #bbb !important;
	}

	::-moz-placeholder {
		color: #bbb !important;
	}

	:-ms-input-placeholder {
		color: #bbb !important;
	}

	.formerize-placeholder {
		color: #bbb !important;
	}

/* Icon */

.icon {
	text-decoration: none;
	border-bottom: none;
	position: relative;
}

	.icon:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		font-style: normal;
		font-variant: normal;
		text-rendering: auto;
		line-height: 1;
		text-transform: none !important;
		font-family: 'Font Awesome 5 Free';
		font-weight: 400;
	}

	.icon > .label {
		display: none;
	}

	.icon.solid:before {
		font-weight: 900;
	}

	.icon.brands:before {
		font-family: 'Font Awesome 5 Brands';
	}

	.icon:before {
		cursor: inherit;
	}


/* Wrapper */


.icon-wrapper {
	width: 4em;
	height: 4.47em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: relative;
	margin: 1.235em 0;

	/* Pastell */
	background: linear-gradient(135deg, #f2c8ea 0%, #dcc4ff 100%);

	/* Hexagon */
	clip-path: polygon(
		50% 0%,
		100% 25%,
		100% 75%,
		50% 100%,
		0% 75%,
		0% 25%
	);

	/* Shadow */
	filter: drop-shadow(0 6px 12px rgba(170, 140, 200, 0.28));

	/* smooth animation */
	transition: transform 0.25s ease, filter 0.25s ease;

	backface-visibility: hidden;
	transform: translateZ(0);
}

/* Dreieck */
.icon-wrapper:before,
.icon-wrapper:after {
	display: none;
}

/* Hover */

.icon-wrapper:hover {
	transform: translateY(-2px);

	filter: 
		drop-shadow(0 10px 18px rgba(170, 140, 200, 0.45))
		drop-shadow(0 0 14px rgba(242, 200, 234, 0.6))
		drop-shadow(0 0 24px rgba(220, 196, 255, 0.5));
}

/* Icon */
.icon-wrapper .icon {
	cursor: default;
	color: #ffffff;
	line-height: 1;
	z-index: 2;
}

.icon-wrapper .icon:before {
	font-size: 1.5rem;
}

/* Varianten */

.icon-wrapper.major {
	display: flex;
	margin: 1.235em 0 3.235em 0;
}

.icon-wrapper.small {
	font-size: 0.75em;
}

.icon-wrapper.small .icon:before {
	font-size: 1.25rem;
}


/* Image */

	.image {
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* =========================
   Fancy Image
========================= */

.fancy-img {
  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  border-radius: 18px;
  margin-top: 0px;
  margin-bottom: 40px;

  transition: 
    transform 0.5s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.5s cubic-bezier(.22,.61,.36,1);

  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Bild */
.fancy-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transition: 
    transform 0.7s cubic-bezier(.22,.61,.36,1),
    filter 0.6s ease;
}

/* Hover */
.fancy-img:hover {
  transform: translateY(-6px);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 5px 15px rgba(0, 0, 0, 0.12);
}

/* Bild Zoom */
.fancy-img:hover img {
  transform: scale(1.06);
  filter: brightness(1.05) saturate(1.08);
}

/* Shine */

.fancy-img::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -160%;
  width: 120%;
  height: 140%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.18) 40%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.18) 60%,
    rgba(255,255,255,0.05) 75%,
    rgba(255,255,255,0) 100%
  );

  transform: skewX(-8deg);
  filter: blur(6px);
}

.fancy-img:hover::before {
  animation: silkShine 1.6s cubic-bezier(.22,.61,.36,1);
}

@keyframes silkShine {
  0% {
    left: -160%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 180%;
    opacity: 0;
  }
}


/* Layer fix */
.fancy-img img {
  position: relative;
  z-index: 1;
}

/* Remove theme overlay */
.image.fancy-img::after {
  content: none !important;
}

@media screen and (max-width: 900px) {

  .fancy-img {
    margin-bottom: 25px;
  }

}

@media screen and (max-width: 600px) {

  .fancy-img {
    margin-bottom: 15px;
  }

}

/* IMG Zoom */

.image.soft-zoom {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

/* Bild */
.image.soft-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transform: scale(1.08);
  transition: transform 0.8s ease, filter 0.8s ease;
}

/* Hover */
.image.soft-zoom:hover img {
  transform: scale(1);
  filter: brightness(1.12) saturate(1.05);
}

.image.profile-fancy {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 16px;
  line-height: 0; /* verhindert Baseline-Whitespace */

  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Bilder seitlich */
.image.profile-fancy img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  transition: transform 0.45s ease, filter 0.45s ease;
}

/* Hover */
.image.profile-fancy:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

/* Hover: minimal zoomen + heller */
.image.profile-fancy:hover img {
  transform: scale(1.03);
  filter: brightness(1.12) saturate(1.06);
}

.image-center {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

/* =========================
   IMG shadow
========================= */

.image.shadow img {
    display: block;

    /* shadow */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.45),
        0 0 2px rgba(0,0,0,0.35);

    transition: 
        transform 0.35s ease,
        filter 0.35s ease,
        box-shadow 0.35s ease;
}

.image.shadow img:hover {
    transform: scale(1.05);

    filter: brightness(1.10);

    box-shadow: 
        0 4px 10px rgba(0,0,0,0.55),
        0 0 3px rgba(0,0,0,0.45);
}

/* News Avatar */

.news-ava {
    display: inline-block;
    width: 250px;
    height: 250px;
    overflow: hidden;

    border-radius: 50%;

    /* Pastell Border */
    border: 4px solid #f3ccff;

    /* shadow */
    box-shadow: 0 6px 14px rgba(220, 170, 255, 0.35);

    transition: 
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.news-ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: 
        transform 0.4s ease,
        filter 0.4s ease;
}

/* Hover */
.news-ava:hover img {
    transform: scale(1.08);
}

/* Hover Container */
.news-ava:hover {
    transform: translateY(-3px);

    border-color: #ffd6f4;

    box-shadow: 0 10px 22px rgba(255, 190, 225, 0.45);
}

/* =========================
   Mina Profile Card
========================= */

.mina-profile {
  border-radius: 18px;
  padding: 1.25rem;
  background: rgba(235, 225, 250, 0.92);
  border: 1px solid rgba(122, 76, 166, 0.18);
  position: relative;
  overflow: hidden;
}

.mina-profile::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at top, rgba(226,138,187,.22), transparent 55%),
    radial-gradient(circle at bottom, rgba(194,143,230,.25), transparent 60%);
  pointer-events: none;
}

.mina-profile__head {
  margin-bottom: .85rem;
  position: relative;
}

.mina-profile__title {
  margin: 0;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5a1c9a;
  font-size: 1.05rem;
}

.mina-profile__subtitle {
  margin: .25rem 0 0;
  color: rgba(90,28,154,.78);
  font-weight: 600;
}

.mina-profile__grid {
  margin: 0;
  display: grid;
  gap: .65rem;
}

.mina-profile__row {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: .75rem;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(122,76,166,.12);
}

.mina-profile__row dt {
  font-weight: 700;
  color: #6a2fa0;
}

.mina-profile__row dd {
  margin: 0;
  color: rgba(42,14,74,.85);
  line-height: 1.45;
}

.mina-profile__row a {
  color: #7a4ca6;
  text-decoration: none;
  border-bottom: 1px dashed rgba(122,76,166,.45);
}

.mina-profile__row a:hover {
  border-bottom-color: rgba(122,76,166,.85);
}

.mina-profile__row--full {
  grid-template-columns: 12.5rem 1fr;
}

.mina-profile__note {
  margin-top: .6rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  background: rgba(225,210,245,.75);
  border: 1px solid rgba(122,76,166,.12);
}

.mina-profile__quote {
  color: rgba(90,28,154,.75);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 720px) {
  .mina-profile__row {
    grid-template-columns: 1fr;
    gap: .35rem;
  }
}

/* =========================
   Mina – Moonie Questions
========================= */

.mina-moonie {
  margin-top: 2rem;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  background: rgba(240, 232, 252, 0.9);
  border: 1px solid rgba(122, 76, 166, 0.15);
}

.mina-moonie__title {
  margin: 0 0 1.2rem;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a1c9a;
}

.mina-moonie__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

/* einzelne Frage */
.mina-moonie__list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.8rem;
  align-items: flex-start;

  padding: 0.9rem 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(122, 76, 166, 0.12);
}

/* Mond-Icon */
.mina-moonie__icon {
  font-size: 1.2rem;
  color: #9b5cc8;
  line-height: 1.4;
}

/* Frage */
.mina-moonie__list strong {
  display: block;
  font-weight: 700;
  color: #6a2fa0;
  margin-bottom: 0.2rem;
}

/* Antwort */
.mina-moonie__list p {
  margin: 0;
  color: rgba(42, 14, 74, 0.85);
  line-height: 1.45;
}

/* =========================
   Responsive
========================= */
@media (max-width: 600px) {
  .mina-moonie__list li {
    grid-template-columns: 1.6rem 1fr;
  }
}


/* =========================
   Past Layout Cards
   ========================= */

.past{
  --violet-1: #e9ddff;
  --violet-2: #cbb3ff;
  --violet-3: #8b5cf6;

  --ink: #2b2450;
  --muted: rgba(43,36,80,.78);

  /* own button color for "Großansicht" */
  --zoom-1: #ec4899;
  --zoom-2: #a78bfa;

  margin: 16px 0 0 0;
  padding: 1.55rem 1.6rem 1.35rem;
  max-width: 100%;

  background:
    radial-gradient(1200px 300px at 20% 0%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(900px 260px at 95% 35%, rgba(203,179,255,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,248,255,.92));

  border: 1px solid rgba(203,179,255,.55);
  border-radius: 18px;

  box-shadow:
    0 14px 30px rgba(43,36,80,.12),
    0 2px 0 rgba(255,255,255,.65) inset;

  position: relative;
  overflow: hidden;
}

.past::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(2px 2px at 18% 22%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(2px 2px at 35% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 72% 28%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(2px 2px at 88% 60%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(2px 2px at 22% 78%, rgba(255,255,255,.45), transparent 60%);
  opacity: .55;
  pointer-events:none;
}

.past > *{ position: relative; z-index: 1; }

/* Image */
.past > img{
  max-width: 100%;
  height: auto;

  margin: 0 1.4rem 1.1rem 0;
  border-radius: 16px;

  border: 1px solid rgba(203,179,255,.65);
  background: rgba(255,255,255,.7);

  box-shadow:
    0 20px 36px rgba(43,36,80,.18),
    0 0 0 8px rgba(255,255,255,.55);

  transform: translateY(0) scale(1);
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;

  display: block;
  object-fit: contain;
}

/* Float image */
.past > img[align="left"]{
  float:left;
}

.past:hover > img{
  transform: translateY(-6px) scale(1.05);
  filter: brightness(1.07) saturate(1.08);

  box-shadow:
    0 30px 55px rgba(43,36,80,.22),
    0 0 0 9px rgba(255,255,255,.62),
    0 0 0 1px rgba(139,92,246,.22);
}

/* Date bar */
.past > .date{
  display:flex;
  align-items:center;
  gap: .8rem;

  margin: 0 0 .95rem 0;
  padding: .75rem 1rem;
  border-radius: 14px;

  border: 1px solid rgba(139,92,246,.22);
  background: linear-gradient(135deg, rgba(203,179,255,.35), rgba(255,255,255,.70));
  box-shadow: 0 10px 18px rgba(43,36,80,.08);

  color: var(--muted);
  backdrop-filter: blur(6px);
}

.past > .date > b{
  color: var(--ink);
  font-weight: 850;
  letter-spacing: .2px;

  padding: .15rem .55rem;
  border-radius: 999px;
  background: rgba(139,92,246,.12);
}

/* Großansicht button */
.past > .date > a{
  margin-left: auto;

  text-decoration: none !important;
  border-bottom: none !important;

  font-weight: 800;
  color: #ffffff !important;

  padding: .55rem .95rem;
  border-radius: 999px;

  background: linear-gradient(135deg, var(--zoom-1), var(--zoom-2));
  box-shadow: 0 12px 22px rgba(236,72,153,.22);

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.past > .date > a:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 28px rgba(236,72,153,.28);
}

/* Text block */
.past p{
  margin-top: .35rem;
  padding: .9rem 1.1rem;
  line-height: 1.7;
}

/* Links */
.past p a{
  color: #6d28d9;
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px dashed rgba(109,40,217,.35);
}

.past p a:hover{
  border-bottom-style: solid;
}

/* Clear floats */
.past::after{
  content:"";
  display:block;
  clear:both;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .past > img,
  .past > .date > a{ transition: none; }

  .past:hover > img{
    transform: none;
    filter: none;
  }
}

/* =========================
   Responsive Fix
   ========================= */

@media (max-width: 900px){

  /* Date-Bar unter das Bild zwingen */
  .past > .date{
    clear: both;
    flex-wrap: wrap;
  }

  /* Button responsiv */
  .past > .date > a{
    margin-left: 0;

    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;

    text-align: center;
    line-height: 1.2;
  }
}

/* Mobile */
@media (max-width: 600px){

  .past{
    padding: 1.1rem 1.1rem 1rem;
    border-radius: 16px;
  }

  .past > img[align="left"]{
    float:none;
    display:block;
    margin: 0 auto 1rem auto;
    width: min(300px, 85vw);
    max-width: 100%;
  }

  .past > .date{
    gap: .6rem;
  }

  .past > .date > b{
    display: block;
    width: 100%;

    padding: .38rem .6rem;
    margin-bottom: .25rem;

    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.3;

    border-radius: 6px;
    text-align: center;

    color: rgba(43,36,80,.75);
    background: rgba(139,92,246,.08);
  }

  .past > .date > a{
    text-align: center;
  }

  .past p{
    padding: .85rem .95rem;
    line-height: 1.72;
  }
}


/* =========================
   Past Layout Cards – Profile/Title Variant
   ========================= */

.past.past--profile{
  padding-top: 1.35rem;
}

/* Rechteckig */
.past.past--profile > .date{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  padding: .85rem 1rem;
  margin: 0 0 1rem 0;

  border-radius: 12px;
  border: 1px solid rgba(139,92,246,.24);
  background: linear-gradient(135deg, rgba(203,179,255,.28), rgba(255,255,255,.78));
  box-shadow: 0 12px 22px rgba(43,36,80,.08);

  color: var(--ink);
}

/* Titel im Balken */
.past.past--profile > .date > b{
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;

  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--ink);
}

/* Link */
.past.past--profile > .date > a{
  margin-left: auto;
  white-space: nowrap;

  text-decoration: none !important;
  border-bottom: none !important;

  font-weight: 800;
  color: #ffffff !important;

  padding: .55rem .95rem;
  border-radius: 12px; 
  background: linear-gradient(135deg, var(--zoom-1), var(--zoom-2));
  box-shadow: 0 12px 22px rgba(236,72,153,.22);

  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.past.past--profile > .date > a:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 28px rgba(236,72,153,.28);
}

/* Bild: align right/left */
.past.past--profile > img[align="right"]{
  float: right;
  margin: 0 0 1rem 1.4rem;
}
.past.past--profile > img[align="left"]{
  float: left;
  margin: 0 1.4rem 1rem 0;
}

/* Mobile: Bild unter den Titel, nie größer als Original */
@media (max-width: 600px){
  .past.past--profile > img[align="right"],
  .past.past--profile > img[align="left"]{
    float: none;
    display: block;
    margin: 0 auto 1rem;

    width: auto;
    max-width: min(260px, 85vw);
    height: auto;
    object-fit: contain;
  }

  .past.past--profile > .date{
    flex-wrap: wrap;
    text-align: center;
  }

  .past.past--profile > .date > a{
    width: 100%;
    text-align: center;
  }
}


/* FIX */
@media (max-width: 600px){
  .past > img{
    width: auto; 
    max-width: 85vw;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* =========================
   Early Responsive Center Layout
   ========================= */

@media (max-width: 1000px){

  /* Bild nicht mehr floaten + zentrieren */
  .past > img[align="left"],
  .past > img[align="right"]{
    float: none;
    display: block;
    margin: 0 auto 1.2rem auto;
  }

  /* Date-Bar mittig + unter Bild */
  .past > .date{
    clear: both;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }

  /* Datum volle Breite */
  .past > .date > b{
    width: 100%;
    text-align: center;
  }

  /* Button */
  .past > .date > a{
    margin-left: 0;
    margin-top: .3rem;

    text-align: center;
    white-space: normal;

    max-width: 100%;
  }

  /* Text mittig auf kleineren Screens */
  .past p{
    text-align: center;
  }
}

/* Update */

.updates-wrap{
  margin: 2rem 0;
}

.updates-card{
  border: 1px solid #e6e6e6;
  background: #fbfbfb;
  border-radius: 12px;
  margin: 0 0 1rem;
  overflow: hidden;
}

.updates-head{
  display: block;
  padding: 0.9rem 1rem;
  background: #ffffff;
  color: #444;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #e6e6e6;
}

.updates-head:hover{
  background: #f2f2f2;
}

.updates-body{
  padding: 1rem 1rem 0.25rem;
  text-align: left;
}

.updates-body h4{
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}

.update-entry{
  margin: 0.25rem 0 0.9rem;
  line-height: 1.55;
}

.update-entry b{
  margin-right: 0.35em;
}


/* =========================
   Senshi Cards
   ========================= */


:root{
  --card-bg: rgba(255,255,255,.85);
  --border: rgba(200, 150, 255, .55);

  /* dunklerer rosa Gradient */
  --grad-title: linear-gradient(90deg,
    #b14f99 0%,
    #ff4fa3 45%,
    #ff87c9 100%
  );

  --pink: #ff6fb7;
  --pink-soft: #ffd6ec;
  --lila: #c9a7ff;
  --text: #3a2c50;

  --radius: 16px;
  --shadow: 0 12px 26px rgba(70, 30, 120, .14);
  --shadow-hover: 0 18px 34px rgba(70, 30, 120, .18);
}

/* =========================
   GRID
   ========================= */
.senshi-grid{
  display: grid;

  /* NOCH größer */
  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));

  gap: 48px; /* mehr Luft für größere Karten */

  /* hält alles mittig – auch bei 1–3 Karten */
  justify-content: center;
  margin-bottom: 80px;
}

/* =========================
   CARD
   ========================= */
.senshi-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}

.senshi-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* =========================
   IMAGE (QUADRAT)
   ========================= */
.senshi-card__media{
  padding: 12px 12px 0;
}

.senshi-card__img{
  width: 100%;
  aspect-ratio: 1 / 1; /* quadratisch */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 130, 200, .4);
  box-shadow: 0 8px 16px rgba(140, 70, 180, .12);
}

/* =========================
   CONTENT
   ========================= */
.senshi-card__body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  align-items: center;
  text-align: center;
}

.senshi-card__title{
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.1;

  background: var(--grad-title);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =========================
   BUTTON – BASIS
   ========================= */
.senshi-btn{
  margin-top: auto;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  padding: 9px 12px;
  transition: all .18s ease;
  letter-spacing: .3px;
}

/* =========================
   BUTTON STYLE
   ========================= */
.senshi-btn--soft{
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;

  box-shadow: 0 6px 14px rgba(255, 140, 200, .18);
}

.senshi-btn--soft:hover{
  background: linear-gradient(135deg, #ffe1f1, #fff);
  border-color: var(--pink);
  color: #8a2d63;
  transform: translateY(-1px);
}

/* Tablet */
@media (max-width: 1000px){
  .senshi-grid{
    grid-template-columns: repeat(2, minmax(240px, 300px));
    gap: 36px;
    justify-content: center;
  }
}

@media (max-width: 520px){
  .senshi-grid{
    grid-template-columns: repeat(2, minmax(180px, 220px));
    gap: 24px;
    justify-content: center;
  }
}

/* ===== FUKU ===== */
.fuku-scope{
  --fuku-grad-start:#efe9ff;
  --fuku-grad-end:  #eaf4ff;  
  --fuku-card-bg:   #ffffff;
  --fuku-ring:      #e7e2f3;
  --fuku-text:      #26263a;
  --fuku-muted:     #6a6a86;
  --fuku-radius:    18px;
}

/* Wrapper */
.fuku-scope .fuku-wrap{
  background: linear-gradient(135deg,var(--fuku-grad-start),var(--fuku-grad-end));
  padding: clamp(16px, 2.6vw, 32px);
  border-radius: calc(var(--fuku-radius) + 8px);
  border: 1px solid var(--fuku-ring);
}

/* Headline Fukus */
.fuku-scope .fuku-header{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin: 0 auto clamp(16px, 2.4vw, 28px);
  max-width: 980px;
}
.fuku-scope .fuku-title{
  font-weight:800;
  font-size:clamp(1.25rem, 1rem + 1.2vw, 1.9rem);
  letter-spacing:.2px;
}
.fuku-scope .fuku-sub{
  color:var(--fuku-muted);
  font-size:clamp(.9rem,.85rem + .25vw,1rem);
}

/* Stack */
.fuku-scope .fuku-grid{
  display:grid;
  grid-template-columns: 1fr; 
  gap: clamp(18px, 2.4vw, 26px);
  max-width: 980px;
  margin: 0 auto;
}

/* Karte */
.fuku-scope .fuku-card{
  display:grid;
  grid-template-columns: 96px 1fr;
  align-items:flex-start;
  gap: 18px;
  background: var(--fuku-card-bg);
  border: 1px solid var(--fuku-ring);
  border-radius: var(--fuku-radius);
  padding: clamp(18px, 2.2vw, 28px);
  box-shadow: 0 6px 24px rgba(23, 23, 40, .06);
  transition: transform .12s ease, box-shadow .2s ease;
}
.fuku-scope .fuku-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(23,23,40,.10);
}

/* Icons */
.fuku-scope .fuku-icon{
  width: 75px; height: 75px; min-width:75px; min-height:75px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg,#f7f2ff,#f0f7ff);
  border: 2px solid #efd6ff;
  box-shadow:
    inset 0 0 0 6px rgba(255,255,255,.7),
    0 0 0 1px #e7e2f3;
  font-size: 40px;
  overflow: hidden;
}

/* Bilder */
.fuku-scope .fuku-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* bei Bedarf: cover */
  border-radius: 14px;   /* leichte Rundung */
}

/* Inhalt */
.fuku-scope .fuku-content{
  display:grid; align-content:start; gap:10px;
  max-width: 70ch; 
}
.fuku-scope .fuku-name{
  font-weight:800;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.45rem);
}
.fuku-scope .fuku-meta{
  color:var(--fuku-muted);
  font-size: .96rem;
}
.fuku-scope .fuku-desc{
  color:var(--fuku-text);
  line-height: 1.75;
  font-size: clamp(1rem, .95rem + .25vw, 1.075rem);
  text-align: left;    
  hyphens: none;        
  word-break: normal;
}

/* Mobile (nur echte Handys) */
@media (max-width: 480px){
  .fuku-scope .fuku-card{
    grid-template-columns: 1fr;     /* Icon über Text */
    gap: 12px;
    padding: 16px;                 /* nicht zu klein */
  }

  .fuku-scope .fuku-icon{
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    justify-self: start;
    font-size: 36px;
  }

  .fuku-scope .fuku-content{
    max-width: 100%;
    gap: 8px;
  }

  .fuku-scope .fuku-name{
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .fuku-scope .fuku-meta{
    font-size: 0.86rem;
  }

  .fuku-scope .fuku-desc{
    font-size: 0.96rem;
    line-height: 1.65;
    letter-spacing: 0.1px;
  }

  .fuku-scope .fuku-title{
    font-size: 1.2rem;
  }

  .fuku-scope .fuku-sub{
    font-size: 0.86rem;
  }
}

.traits{
  width: min(100%, 1100px);
  max-width: clamp(720px, 70vw, 1100px);
  display: grid;
  gap: 1.2rem;
}

.trait-section{
  padding: .8rem 1rem;
  border-radius: 14px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(180,160,255,.35);
}

.trait-heading{
  font-weight: 900;
  margin-bottom: .45rem;
  letter-spacing: .3px;
}

.trait-section ul{
  margin: 0;
  padding-left: 1.1rem;
}

.trait-section li{
  line-height: 1.55;
}

.trait-text{
  padding: .9rem 1rem;
  line-height: 1.65;
  font-size: .96rem;
  background: rgba(255,255,255,.45);
  border-left: 4px solid rgba(180,160,255,.45);
  border-radius: 10px;
}

/* Hint Boxes */

.hint {
  background: linear-gradient(135deg, #f7f0ff 0%, #efe3ff 100%);
  border: 1px solid #d8c2f0;
  border-left: 5px solid #b88de0;
  color: #5f4b75;
  padding: 18px 20px;
  margin: 20px 0;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(184, 141, 224, 0.12);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-top: 20px;
  margin-bottom: 35px;
}

.hint strong {
  display: inline-block;
  margin-bottom: 8px;
  color: #7a57a8;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
}

@media (max-width: 600px) {
  .hint {
    padding: 15px 16px;
    font-size: 0.95rem;
    line-height: 1.6;
    border-radius: 12px;
  }

  .hint strong {
    font-size: 1rem;
  }
}

/* Toggle */

    .subtoggle {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }

    .subtoggle-item {
      background: linear-gradient(135deg, #e3e8ff, #f0e6ff);
      border: 1px solid #d3d9ff;
      border-radius: 16px;
      margin-bottom: 1.5rem;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(131, 105, 200, 0.1);
    }

    .subtoggle-header {
      padding: 1.25rem 1.5rem;
      cursor: pointer;
      font-weight: 600;
      background: linear-gradient(135deg, #d5ddff, #ebddff);
      transition: background 0.3s;
    }

    .subtoggle-header:hover {
      background: linear-gradient(135deg, #c6cfff, #e6d4ff);
    }

.subtoggle-content {
  height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: height 0.4s ease, padding 0.3s ease;
}

.subtoggle-content.opening,
.subtoggle-content.closing {
  display: block;
}

.subtoggle-content.open {
  height: auto;
  padding: 1rem 1.5rem 1.5rem;
}

    .subtoggle-content p {
      margin: 0;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .subtoggle-header,
      .subtoggle-content {
        padding-left: 1rem;
        padding-right: 1rem;
      }
    }



/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 600;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

	ul.alt li {
		border-top-color: #e6e6e6;
	}


/* =========================
   Star List – opt-in via class
   ========================= */

ul.stars{
	list-style: none;
	margin: 0 0 2em 0;
	padding-left: 0;
}

ul.stars li{
	position: relative;
	padding-left: 1.9em;
	margin: .45em 0;
	line-height: 1.65;
	color: inherit;
}

/* Stern-Bullet */
ul.stars li::before{
	content: "⭐";
	position: absolute;
	left: 0;
	top: .15em;

	font-size: .95em;
	line-height: 1;
	opacity: .85;
}

.qf{
  width: min(100%, 1100px);
  margin: 0;
  padding: 1rem 1.05rem;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(180,160,255,.35);
}


.qf-title{
  font-weight: 900;
  letter-spacing: .3px;
  margin: 0 0 .75rem 0;
}

.qf-list{
  margin: 0;
  display: grid;
  gap: .6rem;
}

/* Zwei-Spalten */
.qf-list dt{
  font-weight: 800;
  color: rgba(43,36,80,.9);
  margin: 0;
}

.qf-list dd{
  margin: .15rem 0 0 0;
  color: rgba(43,36,80,.85);
  line-height: 1.6;
}

/* Sep */
.qf-list dt + dd{
  padding-bottom: .55rem;
  border-bottom: 1px dashed rgba(180,160,255,.35);
}

/* Links */
.qf-help{
  margin-left: .35rem;
  font-weight: 800;
  text-decoration: none;
  color: rgba(139,92,246,.95);
}

.qf-help:hover{
  text-decoration: underline;
}

/* Toggle-Text */
.qf-more{
  margin-top: .6rem;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(180,160,255,.30);
}

.qf-more small{
  font-size: .93rem;
  line-height: 1.65;
}

.qf-source a{
  text-decoration: none;
  font-weight: 650;
}

/* Mobile: kompakter, aber nicht gequetscht */
@media (max-width: 600px){
  .qf{
    padding: .9rem .95rem;
    border-radius: 14px;
  }
  .qf-list{
    gap: .55rem;
  }
}

/* Alle Vids */
video {
  width: 100% !important;
  max-width: 650px;
  height: auto !important;

  display: block;
  margin: 16px auto;

  /* lilac colors */
  border: 2px solid rgba(180, 140, 255, 0.8);
  border-radius: 18px;
  background: rgba(245, 240, 255, 0.9);

  box-shadow: 0 8px 20px rgba(120, 80, 180, 0.15);
}

/* Mobile */
@media (max-width: 480px) {
  video {
    max-width: 95%;
    border-radius: 14px;
    margin: 12px auto;
  }
}

/* Grid */
.episode-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 30px;

    max-width: 1300px;
    margin: 0 auto 40px auto;
    padding: 30px;
}


/* Karte */
.episode-card {
    display: inline-block;

    border-radius: 14px;
    overflow: hidden;

    cursor: pointer;

    /* dichter, stärkerer Grundschatten */
    box-shadow:
        0 6px 18px rgba(0,0,0,0.25),
        0 12px 35px rgba(0,0,0,0.18);

    transition: all 0.35s ease;
}


/* Bild: Originalgröße behalten */
.episode-card img {
    display: block;

    max-width: 100%;   /* nur verkleinern, nie vergrößern */
    height: auto;      /* Seitenverhältnis behalten */

    width: auto;

    transition: transform 0.4s ease;
}


/* Hover */
.episode-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 12px 28px rgba(0,0,0,0.35),
        0 20px 45px rgba(0,0,0,0.25);
}


/* Mini-Zoom */
.episode-card:hover img {
    transform: scale(1.04);
}

/* Places */

:root{
  --card-radius: 14px;
  --gap: 18px;
  --thumb-ratio: 4/3;

  /* modern polish */
  --grid-max: 980px;
  --shadow: 0 6px 16px rgba(0,0,0,.08);
  --shadow-hover: 0 10px 22px rgba(0,0,0,.12);
  --border: rgba(0,0,0,.06);
  --ease: cubic-bezier(.2,.8,.2,1);
}

.orte-section{
  margin: 28px 0 44px;
}

.orte-section h3{
  margin: 0 0 12px;
  font-size: 1.35rem;
  line-height: 1.2;
}

/* makes the grid feel centered + not too wide */
.orte-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--gap);

  max-width: var(--grid-max);
  margin: 0 auto;             /* center the whole block */
  justify-items: center;       /* center cards inside columns */
}

/* card */
.orte-card{
  width: 100%;
  max-width: 320px;            /* keeps cards nicely centered/compact */
  background: #fff;
  border-radius: var(--card-radius);
  overflow: hidden;

  border: 1px solid var(--border);
  box-shadow: var(--shadow);

  transform: translateZ(0);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.orte-card a{
  display: block;
  outline: none;
}

/* image wrapper for zoom + optional shine */
.orte-card a{
  position: relative;
}

.orte-card img{
  width: 100%;
  aspect-ratio: var(--thumb-ratio);
  object-fit: cover;
  display: block;

  transform: scale(1.001);
  transition: transform .55s var(--ease), filter .55s var(--ease);
  will-change: transform;
}

/* smooth hover */
.orte-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.orte-card:hover img{
  transform: scale(1.08);
  filter: saturate(1.03) contrast(1.03);
}

/* optional subtle shine */
.orte-card a::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.26) 50%, transparent 65%);
  transform: translateX(-35%) rotate(8deg);
  opacity: 0;
  transition: opacity .35s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}

.orte-card:hover a::after{
  opacity: 1;
  transform: translateX(35%) rotate(8deg);
}

.orte-desc{
  margin-top: 14px;
  line-height: 1.6;
  color: #333;
}

.orte-desc p{
  margin: 0 0 12px;
}

/* responsive tweaks – modern compact */

@media (max-width: 520px){

  :root{
    --gap: 12px;
    --shadow: 0 4px 12px rgba(0,0,0,.08);
    --shadow-hover: 0 8px 18px rgba(0,0,0,.12);
  }

  .orte-grid{
    grid-template-columns: repeat(2, 1fr);
    max-width: 480px;
    margin: 0 auto;
    justify-items: stretch;
  }

  .orte-card{
    max-width: none;
    border-radius: 12px;
  }

  .orte-card img{
    aspect-ratio: 1 / 1; /* cleaner look on small screens */
  }

  .orte-desc{
    font-size: .95rem;
  }
}

/* ultra small screens */
@media (max-width: 380px){
  .orte-grid{
    grid-template-columns: 1fr;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .orte-card,
  .orte-card img,
  .orte-card a::after{
    transition: none !important;
  }

  .orte-card:hover{
    transform: none;
  }

  .orte-card:hover img{
    transform: none;
  }
}

/* dark mode */
@media (prefers-color-scheme: dark){

  :root{
    --border: rgba(255,255,255,.10);
    --shadow: 0 8px 20px rgba(0,0,0,.55);
    --shadow-hover: 0 12px 26px rgba(0,0,0,.65);
  }

  .orte-card{
    background:#111;
  }

  .orte-desc{
    color:#ddd;
  }

  .orte-card a::after{
    background: linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.12) 50%,
      transparent 65%
    );
  }
}

/* VIDEOS */

  :root{
    --violet: #b8aef5;
    --blue:   #a8c8ff;   
    --bg:     #ffffff;   
    --text:   #333;
    --muted:  #666;
  }

.video-card {
  background: linear-gradient(135deg, var(--violet), var(--blue));
  padding: 3px;
  border-radius: 18px;
  max-width: 650px;
  width: 100%;
  margin: 24px auto 56px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  transition: box-shadow 0.25s ease; /* nur noch Schatten animieren */
}

.video-card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,.12);
}

  .video-card__inner {
    background: var(--bg);
    border-radius: 16px;
    overflow: hidden;
  }

  .video-card__frame {
    aspect-ratio: 16 / 9;
    width: 100%;
    display: block;
    border: 0;
  }

  .video-card__meta {
    padding: 10px 14px 14px;
    text-align: center;
  }

.video-card__title {
  font: 600 18px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--text);
  margin: 6px 0 6px;
}

.video-card__note {
  font: 15px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--muted);
  margin: 0;
}

  @media (prefers-color-scheme: dark){
    :root{
      --bg:#111318;
      --text:#eaeef7;
      --muted:#b8bfd3;
      --violet:#7f78d9;
      --blue:#6fb3ff;
    }
    .video-card{ box-shadow: 0 10px 24px rgba(0,0,0,.35); }
    .video-card:hover{ box-shadow: 0 14px 28px rgba(0,0,0,.55); }
  }


/* =========================================================
   Sailor Moon Crystal Episodes
   ========================================================= */

/* Global: verhindert Layout-Probleme */
*,
*::before,
*::after{
  box-sizing: border-box;
}

/* Hauptcontainer */
.seasons{

  display: grid;
  gap: clamp(16px, 2vw, 28px);

  width: 100%;
  max-width: 1100px;

  margin-inline: auto;

  /* moderner Außenabstand */
  padding-inline: clamp(16px, 4vw, 32px);

}

/* Staffel-Karte */
details.season{

  border-radius: 16px;

  overflow: hidden;

  width: 100%;
  max-width: 100%;

  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(0,0,0,0.03);

}

/* Dark Mode Support */
@media (prefers-color-scheme: dark){

  details.season{
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.04);
  }

}

/* Summary / Kopfzeile */
details.season > summary{

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  user-select: none;
  list-style: none;

  width: 100%;

  /* modernes dynamisches Padding */
  padding-block: clamp(14px, 2.5vw, 22px);
  padding-inline: clamp(20px, 6vw, 48px);

  font-weight: 800;

}

/* Pfeil */
details.season > summary::-webkit-details-marker{
  display: none;
}

/* Plus / Minus Icon */
details.season > summary::after{

  content: "＋";

  font-weight: 900;
  opacity: 0.8;

  flex-shrink: 0;

}

details.season[open] > summary::after{
  content: "－";
}

/* Hover / Focus */
details.season > summary:hover{
  filter: brightness(1.03);
}

details.season > summary:focus-visible{

  outline: 3px solid rgba(120,160,255,0.55);
  outline-offset: 2px;

}

/* Staffel Inhalt */
.season-body{

  /* modernes Padding */
  padding-block: clamp(20px, 3vw, 36px);
  padding-inline: clamp(20px, 6vw, 60px);

  width: 100%;
  max-width: 100%;

  /* Animation */
  max-height: 0;
  opacity: 0;
  overflow: hidden;

  transition:
    max-height 420ms ease,
    opacity 220ms ease;

}

details.season[open] .season-body{
  opacity: 1;
}

/* Tabellen */
.season-body table{

  width: 100%;
  max-width: 100%;

  border-collapse: collapse;

  table-layout: fixed;

}

/* Tabellenzeilen */
.season-body tr{

  width: 100%;
  max-width: 100%;

}

/* Tabellenzellen */
.season-body td{

  vertical-align: top;

  width: 100%;
  max-width: 100%;

}

/* Bildspalte Desktop */
.season-body td:first-child{

  width: 220px;
  max-width: 220px;

  padding-right: 20px;

}

/* Textspalte */
.season-body td:last-child{
  width: 100%;
}

/* Text Overflow Schutz */
.season-body td,
.season-body p,
.season-body span,
.season-body a,
.season-body div{

  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;

  max-width: 100%;

}

/* Bilder */
.season-body img{

  display: block;

  width: 100%;
  max-width: 200px;

  height: auto;

}

/* Bild Links */
.season-body a.picture{

  display: inline-block;
  max-width: 100%;

}

/* bessere Lesbarkeit bei großen Screens */
.season-body > *{

  max-width: 75ch;

}

/* =========================
   MOBILE OPTIMIERUNG
   ========================= */

@media (max-width: 760px){

  .season-body table,
  .season-body tbody,
  .season-body tr,
  .season-body td{

    display: block;

    width: 100%;
    max-width: 100%;

  }

  .season-body td:first-child{

    width: 100%;
    max-width: 100%;

    padding-right: 0;
    margin-bottom: 14px;

  }

  .season-body img{

    max-width: 100%;
    width: 100%;

  }

}

/* Extra kleine Geräte */
@media (max-width: 400px){

  .season-body{

    padding-inline: clamp(16px, 6vw, 28px);

  }

}

/* Place section */

.places-section {
  padding: 20px 20px 50px;
}

.places-intro {
  text-align: center;
  margin-bottom: 40px;
}

.places-intro h2 {
  font-size: 2rem;
  color: #b784c6;
  margin-bottom: 10px;
  font-family: 'Georgia', serif;
}

.places-intro p {
  color: #8c7a9e;
  font-size: 0.95rem;
}

.places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
  justify-content: center;
  gap: 26px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: stretch;
}

.place-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, #fdf7ff 0%, #f8ecff 50%, #ffeef6 100%);
  border: 1px solid #ead8f5;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(160, 120, 190, 0.08);
  transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
  will-change: transform;
}

.place-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 38px rgba(160, 120, 190, 0.15);
  border-color: #d8b8ee;
}

.place-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #f6edff, #ffe9f4);
  flex-shrink: 0;
}

.place-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transition: 
    transform 0.6s ease,
    filter 0.6s ease;

  filter: brightness(0.95) saturate(0.95);
}

.place-card:hover .place-thumb img {
  transform: scale(1.05);

  filter: 
    brightness(1.1)
    saturate(1.2)
    contrast(1.05);
}

.place-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 16px;
  text-align: center;

  background: rgba(245, 235, 255, 0.68);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-top: 1px solid rgba(216, 184, 238, 0.35);
}

.place-info h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  color: #8f63aa;
  font-weight: 600;
  line-height: 1.4;
}

.place-info span {
  display: block;
  font-size: 0.9rem;
  color: #6f647a;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .places-section {
    padding: 40px 15px;
  }

  .places-intro h2 {
    font-size: 1.6rem;
  }

  .places-grid {
    grid-template-columns: 1fr;
  }

  .place-info {
    padding: 16px 14px;
  }
}

/* Sources */

.sources {
    font-size: 0.8em;
    color: #777;
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.sources-title {
    font-weight: 600;
    margin-right: 6px;
}

.sources a {
    color: #777;
    text-decoration: none;
    margin-right: 6px;
}

.sources a:hover {
    text-decoration: underline;
}

/* Adopties */

.adoptable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, max-content));
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 18px auto 40px;
  padding: 0;
  background: transparent;
}

.adoptable-grid img {
  display: block;
  max-width: 100%;
  height: auto;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.adoptable-grid img:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.12));
}

/* Texte */
.adoptable-note,
.adoptable-intro {
  text-align: center;
  margin: 12px 0 40px;
}

/* Aud-Player */

.audio-player {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

.audio-player audio {
    width: 320px;
    max-width: 100%;
    padding: 6px;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        #f9d8ff,
        #e8cfff,
        #ffd6f3
    );
    box-shadow:
        0 0 8px rgba(232, 207, 255, 0.4);
}

/* Milestones */

.moon-milestones {
  padding: 50px 20px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.9), rgba(243,234,255,0.9)),
    linear-gradient(180deg, #f8f2ff 0%, #f3ebff 100%);
  position: relative;
  overflow: hidden;
}

.moon-milestones::before {
  content: "☾ ✦ ✧ ♀ ☿ ♃ ♄ ☽";
  position: absolute;
  top: 25px;
  right: 30px;
  font-size: 1.1rem;
  letter-spacing: 10px;
  color: rgba(143, 117, 186, 0.18);
  pointer-events: none;
}

.moon-milestones::after {
  content: "✧ ☾ ✦ ♀ ☿";
  position: absolute;
  bottom: 20px;
  left: 30px;
  font-size: 1rem;
  letter-spacing: 12px;
  color: rgba(143, 117, 186, 0.14);
  pointer-events: none;
}

.moon-milestones-inner {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.moon-headline {
  text-align: center;
  margin-bottom: 35px;
}

.moon-kicker {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f7efff, #efe3ff);
  color: #8664b0;
  font-size: 0.88rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-shadow: 0 5px 14px rgba(151, 123, 198, 0.12);
}

.moon-headline h2 {
  margin: 0 0 12px;
  color: #72519d;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
}

.moon-headline p {
  max-width: 700px;
  margin: 0 auto;
  color: #8f7aac;
  line-height: 1.7;
  font-size: 1rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 30px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(189, 165, 225, 0.35);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(142, 112, 186, 0.10);
  backdrop-filter: blur(7px);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "✧";
  position: absolute;
  top: 12px;
  right: 14px;
  color: rgba(145, 116, 190, 0.25);
  font-size: 1rem;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(142, 112, 186, 0.16);
}

.stat-symbol {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fcf8ff, #efdeff);
  color: #8660b2;
  font-size: 1.5rem;
  box-shadow: inset 0 0 0 1px rgba(188, 163, 222, 0.25);
}

.stat-card h3 {
  margin: 0 0 10px;
  color: #744fa0;
  font-size: 1rem;
  line-height: 1.4;
}

.stat-number {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: #5d3f81;
  margin-bottom: 10px;
  line-height: 1.1;
}

.stat-card p {
  margin: 0;
  color: #937fb0;
  line-height: 1.6;
  font-size: 0.95rem;
}

.anniversary-card {
  background: linear-gradient(180deg, rgba(255,245,253,0.95), rgba(244,232,255,0.95));
  border: 1px solid rgba(177, 138, 220, 0.42);
}

.milestone-box {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(189, 165, 225, 0.35);
  border-radius: 26px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(142, 112, 186, 0.09);
}

.milestone-box h3 {
  margin: 0 0 20px;
  text-align: center;
  color: #734ea0;
  font-size: 1.3rem;
}

.milestone-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.milestone-item {
  background: linear-gradient(180deg, #fffaff, #f7f0ff);
  border: 1px solid rgba(200, 180, 228, 0.40);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.milestone-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(144, 116, 188, 0.10);
}

.milestone-value {
  font-weight: 700;
  color: #65458d;
  font-size: 1rem;
}

.milestone-label {
  font-size: 0.86rem;
  color: #9a83b9;
  background: #f8f1ff;
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}

.milestone-item.current {
  background: linear-gradient(135deg, #fdf4ff, #ecdfff);
  border: 1px solid rgba(171, 133, 218, 0.55);
  box-shadow: 0 10px 22px rgba(162, 126, 211, 0.15);
}

.milestone-item.current .milestone-value {
  color: #593a80;
}

.milestone-item.current .milestone-label {
  background: rgba(255,255,255,0.7);
  color: #855fb1;
}

@media (max-width: 950px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .milestone-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .stats-grid,
  .milestone-list {
    grid-template-columns: 1fr;
  }

  .milestone-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .moon-milestones {
    padding: 35px 15px;
  }

  .milestone-box,
  .stat-card {
    border-radius: 20px;
  }
}

/* Creds */

section.credits {
    background: linear-gradient(135deg, #f8f1ff 0%, #f3ecff 45%, #efe6ff 100%);
    border: 1px solid rgba(170, 140, 210, 0.25);
    border-radius: 24px;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 10px 30px rgba(157, 126, 201, 0.12);
    position: relative;
    overflow: hidden;
}

section.credits::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

section.credits::after {
    content: "";
    position: absolute;
    bottom: -70px;
    left: -70px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(221,196,255,0.28) 0%, rgba(221,196,255,0) 72%);
    pointer-events: none;
}

section.credits h2,
section.credits h3 {
    color: #7d5aa6;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0;
    position: relative;
    z-index: 1;
}


section.credits h3 {
    font-size: 1.45rem;
    margin-top: 1.5rem;
    margin-bottom: 0.2rem;
    color: #8b68b5;
}

section.credits p {
    color: #5f5570;
    font-size: 1rem;
    line-height: 1.9;
    margin: 0 0 1.2rem;
    position: relative;
    z-index: 1;
}

section.credits em {
    color: #9a6fd1;
    font-style: italic;
    font-weight: 600;
}

section.credits strong {
    color: #7553a0;
    font-weight: 700;
}

section.credits a {
    color: #8d63c2;
    text-decoration: none;
    border-bottom: 1px dashed rgba(141, 99, 194, 0.4);
    transition: all 0.25s ease;
}

section.credits a:hover {
    color: #6f48a6;
    border-bottom-color: rgba(111, 72, 166, 0.7);
}

@media screen and (max-width: 768px) {
    section.credits {
        padding: 1.6rem;
        border-radius: 18px;
    }


    section.credits h3 {
        font-size: 1.2rem;
    }

    section.credits p {
        font-size: 0.97rem;
        line-height: 1.75;
    }
}


/* Uni-Bilder */

.image-uniform {
    display: inline-block;
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-radius: 12px;

    /* dichter, näher am Bild */
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);

    transition: 
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.image-uniform img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: 
        transform 0.4s ease,
        filter 0.4s ease;
}

.image-uniform:hover img {
    transform: scale(1.08);
    filter: brightness(1.15);
}

.image-uniform:hover {
    transform: translateY(-3px);

    /* Hover Schatten auch dichter */
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}


/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Icons */

	ul.icons {
		list-style: none;
		padding-left: 0;
	}

		ul.icons li {
			display: inline-block;
			padding: 0 1em 0 0;
		}

			ul.icons li:last-child {
				padding-right: 0;
			}

			ul.icons li .icon:before {
				font-size: 2em;
			}

/* Bulleted Icons */

	ul.bulleted-icons {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 0;
	}

		ul.bulleted-icons li {
			margin: 2em 0 0 0;
			overflow: hidden;
			padding-left: 4.5em;
			position: relative;
			width: 50%;
		}

			ul.bulleted-icons li .icon-wrapper {
				font-size: 0.65em;
				left: 0;
				position: absolute;
				top: 0;
			}

				ul.bulleted-icons li .icon-wrapper .icon:before {
					font-size: 1rem;
				}

			ul.bulleted-icons li h3 {
				font-size: 0.9em;
				margin-bottom: 0.5em;
				padding-bottom: 0;
			}

				ul.bulleted-icons li h3:after {
					display: none;
				}

		@media screen and (max-width: 1280px) {

			ul.bulleted-icons li {
				width: 100%;
				margin: 1em 0 0 0;
			}

		}

/* Menu */

	ul.menu {
		padding: 0;
		list-style: none;
	}

		ul.menu li {
			padding: 0;
			display: inline-block;
			margin-left: 0.75em;
			padding-left: 0.75em;
			border-left: solid 1px;
			line-height: 1em;
		}

			ul.menu li:first-child {
				margin-left: 0;
				padding-left: 0;
				border-left: 0;
			}

	ul.menu li {
		border-left-color: #e6e6e6;
	}

/* Pagination */

	ul.pagination {
		cursor: default;
		list-style: none;
		padding-left: 0;
	}

		ul.pagination li {
			display: inline-block;
			padding-left: 0;
			vertical-align: middle;
		}

			ul.pagination li > .page {
				-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
				border-bottom: 0;
				display: inline-block;
				height: 1.5em;
				line-height: 1.5em;
				margin: 0 0.125em;
				min-width: 1.5em;
				padding: 0 0.5em;
				text-align: center;
			}

			ul.pagination li:first-child {
				padding-right: 0.75em;
			}

			ul.pagination li:last-child {
				padding-left: 0.75em;
			}

		@media screen and (max-width: 480px) {

			ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
				display: none;
			}

			ul.pagination li:first-child {
				padding-right: 0;
			}

		}

	ul.pagination li > .page.active {
		background-color: #444;
		color: #fff !important;
	}

		ul.pagination li > .page.active:hover {
			background-color: #515151;
		}

		ul.pagination li > .page.active:active {
			background-color: #373737;
		}

/* Post */

	.post {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
		margin-bottom: 2em;
	}

		.post .image {
			display: block;
			margin-bottom: 1em;
			width: 100%;
			-ms-flex: 0 0 auto;
		}

			.post .image img {
				width: 100%;
			}

		.post .content {
			padding: 2.5em 2.5em 0.5em 2.5em ;
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
		}

		@media screen and (max-width: 1280px) {

			.post .content {
				padding: 2em 2em 0.1em 2em ;
			}

		}

		@media screen and (max-width: 736px) {

			.post {
				display: block;
			}

				.post .content {
					padding: 2em 1.5em 0.1em 1.5em ;
				}

		}

	.post .content {
		background-color: transparent;
		border: solid 1px #e6e6e6;
	}

/* Posts */

	.posts {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		-moz-align-items: -moz-stretch;
		-webkit-align-items: -webkit-stretch;
		-ms-align-items: -ms-stretch;
		align-items: stretch;
	}

		.posts .post {
			width: calc(33.33333333% - 1.25em);
		}

		@media screen and (max-width: 1280px) {

			.posts .post {
				width: calc(50% - 1em);
			}

		}

		@media screen and (max-width: 736px) {

			.posts {
				display: block;
			}

				.posts .post {
					width: 100%;
				}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header.major {
		margin: 0 0 4em 0;
	}

		header.major > :last-child {
			margin-bottom: 0;
		}

		header.major h2 {
			font-size: 2.25em;
			font-weight: 800;
			margin: 0 0 0.7em 0;
			padding-bottom: 0.75em;
		}

		@media screen and (max-width: 1280px) {

			header.major h2 {
				font-size: 1.25em;
			}

		}

/* Spotlight */

	.spotlight {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
	}

		.spotlight .content {
			width: calc(33.3333333% - 1.25em);
		}

		.spotlight h2 {
			font-size: 2.25em;
			font-weight: 800;
			margin: 0 0 0.7em 0;
			padding-bottom: 0.75em;
		}

		.spotlight .image {
			width: calc(66.6666666% - 2.5em);
			margin: 0 0 2em 0;
		}

			.spotlight .image img {
				width: 100%;
			}

		@media screen and (max-width: 1280px) {

			.spotlight h2 {
				font-size: 1.25em;
			}

			.spotlight .image {
				width: calc(66.6666666% - 1.25em);
			}

		}

		@media screen and (max-width: 980px) {

			.spotlight {
				display: block;
			}

				.spotlight .content {
					width: 100%;
				}

				.spotlight .image {
					width: 100%;
					margin: 0 0 2em 0;
				}

		}

/* =========================
   Mina Table
========================= */

.table-wrapper {
  overflow-x: auto;
  border-radius: 16px;
  background: rgba(235, 225, 250, 0.75);
  padding: 0.5rem;
}

/* Grundtabelle */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  overflow: hidden;
}

/* Kopf */
table thead {
  background: rgba(225, 210, 245, 0.95);
}

table th {
  padding: 0.9em 0.75em;
  font-family: "Raleway", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 0.85em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a1c9a;
  border-bottom: 1px solid rgba(122, 76, 166, 0.25);
}

/* Zellen */
table td {
  padding: 0.75em 0.75em;
  color: rgba(42, 14, 74, 0.85);
  vertical-align: top;
}

/* Reihen */
table tbody tr {
  border: none;
}

table tbody tr:nth-child(odd) {
  background-color: rgba(245, 238, 255, 0.9);
}

table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.95);
}

/* sanfter Hover */
table tbody tr:hover {
  background-color: rgba(225, 210, 245, 0.8);
}

/* Footer */
table tfoot {
  background: rgba(235, 225, 250, 0.9);
}

table tfoot td {
  font-weight: 600;
  color: #5a1c9a;
  border-top: 1px solid rgba(122, 76, 166, 0.25);
}

/* =========================
   ALT Table (falls genutzt)
========================= */

table.alt {
  border-collapse: separate;
  border-spacing: 0.5em;
  background: transparent;
}

table.alt tbody tr td {
  border: 1px solid rgba(122, 76, 166, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
}

/* =========================
   Responsive
========================= */

@media (max-width: 700px) {

  table thead {
    display: none;
  }

  table,
  table tbody,
  table tr,
  table td {
    display: block;
    width: 100%;
  }

  table tr {
    margin-bottom: 1rem;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
  }

  table td {
    padding: 0.6em 0.75em;
    position: relative;
  }

  /* Label aus data-label */
  table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6a2fa0;
    margin-bottom: 0.15em;
  }
}


/* =========================
   Universal Image Grid
   pastel
   responsive included
========================= */

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 1.2rem;
  justify-items: center;
  align-items: center;
  margin: 1.8rem 0;

  /* Hintergrund */
  padding: 1.2rem;
  border-radius: 20px;
  background: rgba(235, 225, 250, 0.55);

  /* wichtig */
  overflow: visible;
}

/* einzelne Items (img oder a) */
.image-grid > *,
.image-grid a {
  position: relative;
  display: inline-block;

  /* visible */
  overflow: visible;

  /* beside */
  z-index: 0;
}

/* Bilder */
.image-grid img {
  max-width: 100%;
  height: auto;
  display: block;

  transition:
    transform 0.4s ease,
    filter 0.4s ease;
}

/* Hover: Zoom ohne "hellen Hintergrund"/Aufhellung */
.image-grid a:hover img,
.image-grid img:hover {
  transform: translateY(-6px) scale(1.06);

  /* crisp */
  filter: saturate(1.03) contrast(1.02);
}

.image-grid > *:hover::after,
.image-grid a:hover::after {
  left: 160%;
}

/* Glow */
.image-grid > *:hover,
.image-grid a:hover {
  z-index: 2;
  box-shadow:
    0 10px 22px rgba(155, 92, 200, 0.18),
    0 0 18px rgba(155, 92, 200, 0.22);
}

/* =========================
   Varianten
========================= */

.image-grid--small {
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  padding: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 3rem;
}

.image-grid--large {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 1.2rem;
  margin-bottom: 3rem;
}

.image-grid--center {
  justify-content: center;
}

/* =========================
   Responsive / Mobile tweaks
========================= */

@media (max-width: 600px) {
  .image-grid {
    gap: 0.9rem;
    padding: 1rem;
  }

  .image-grid--large {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* auf Touch-Geräten kein Zoom (verhindert "sticky hover") */
@media (hover: none) {
  .image-grid a:hover img,
  .image-grid img:hover {
    transform: none !important;
    filter: none !important;
  }

  .image-grid > *:hover,
  .image-grid a:hover {
    box-shadow: none;
  }

  .image-grid > *:hover::after,
  .image-grid a:hover::after {
    left: -140%;
  }
}

/* Character Cards Crystal */

.char-card {
  position: relative;
  overflow: hidden;
}

.char-card img {
  display: block;
  width: 100%;
  height: auto;
}

.char-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  padding: 6px 8px;
  font-size: 12px;
  text-align: center;

  color: white;

  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7),
    rgba(0,0,0,0)
  );

  opacity: 0;
  transform: translateY(6px);

  transition: all 0.25s ease;
}

/* Desktop hover */
.char-card:hover .char-name {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile */
@media (hover: none) {
  .char-name {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Wrapper */

	.wrapper {
		padding: 4em 0 2em 0 ;
		position: relative;
	}

		.wrapper > .inner {
			margin: 0 auto;
			max-width: 90em;
			width: 90%;
		}

		.wrapper + .wrapper {
			border-top: solid 1px #e6e6e6;
		}

		.wrapper.major-pad {
			padding: 6em 0 4em 0 ;
		}

		.wrapper.content-pad {
			padding: 0;
		}

			.wrapper.content-pad .content {
				padding: 4em 0 2em 0 ;
			}


.wrapper.split {
	background-color: #a7a2b0;   /* Pastell Lila-Grau */
	padding: 4em 0 2em 0;
}

/* Innerer Container */
.wrapper.split > .inner {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

/* Zwei Spalten */
.wrapper.split > .inner > * {
	width: calc(50% - 3.75em);
}

/* Mittleren Trennstrich komplett entfernen */
.wrapper.split > .inner > *:before {
	display: none;
}

/* Etwas Luft zwischen den beiden Bereichen */
.wrapper.split > .inner > section {
	padding: 0 1.2em;
}

/* Mobile Ansicht: untereinander */
@media screen and (max-width: 736px) {

	.wrapper.split {
		padding: 3em 0 1.5em 0;
	}

	.wrapper.split > .inner {
		display: block;
	}

	.wrapper.split > .inner > * {
		width: 100%;
		padding: 0;
	}

}

		.wrapper.style1 {
			background-color: #444;
			color: #fff;
			border-top: 0;
		}

			.wrapper.style1 input, .wrapper.style1 select, .wrapper.style1 textarea {
				color: #fff;
			}

			.wrapper.style1 a {
				color: #fff;
			}

			.wrapper.style1 strong, .wrapper.style1 b {
				color: #fff;
			}

			.wrapper.style1 h1, .wrapper.style1 h2, .wrapper.style1 h3, .wrapper.style1 h4, .wrapper.style1 h5, .wrapper.style1 h6 {
				color: #fff;
			}

			.wrapper.style1 blockquote {
				border-left-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 code {
				background: rgba(255, 255, 255, 0.075);
				border-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 hr {
				border-bottom-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 .box {
				border-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 input[type="submit"],
			.wrapper.style1 input[type="reset"],
			.wrapper.style1 input[type="button"],
			.wrapper.style1 button,
			.wrapper.style1 .button {
				background-color: transparent;
				color: #fff !important;
				box-shadow: inset 0 0 0 1px #fff;
			}

				.wrapper.style1 input[type="submit"]:hover,
				.wrapper.style1 input[type="reset"]:hover,
				.wrapper.style1 input[type="button"]:hover,
				.wrapper.style1 button:hover,
				.wrapper.style1 .button:hover {
					background-color: rgba(255, 255, 255, 0.075);
				}

				.wrapper.style1 input[type="submit"]:active,
				.wrapper.style1 input[type="reset"]:active,
				.wrapper.style1 input[type="button"]:active,
				.wrapper.style1 button:active,
				.wrapper.style1 .button:active {
					background-color: rgba(255, 255, 255, 0.2);
				}

				.wrapper.style1 input[type="submit"].primary,
				.wrapper.style1 input[type="reset"].primary,
				.wrapper.style1 input[type="button"].primary,
				.wrapper.style1 button.primary,
				.wrapper.style1 .button.primary {
					box-shadow: none;
					background-color: #fff;
					color: #444 !important;
				}

			.wrapper.style1 .features > section:before {
				background-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 label {
				color: #fff;
			}

			.wrapper.style1 input[type="text"],
			.wrapper.style1 input[type="password"],
			.wrapper.style1 input[type="email"],
			.wrapper.style1 input[type="tel"],
			.wrapper.style1 input[type="search"],
			.wrapper.style1 input[type="url"],
			.wrapper.style1 select,
			.wrapper.style1 textarea {
				-moz-transition: border-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out;
				border-color: rgba(255, 255, 255, 0.25);
			}

				.wrapper.style1 input[type="text"]:focus,
				.wrapper.style1 input[type="password"]:focus,
				.wrapper.style1 input[type="email"]:focus,
				.wrapper.style1 input[type="tel"]:focus,
				.wrapper.style1 input[type="search"]:focus,
				.wrapper.style1 input[type="url"]:focus,
				.wrapper.style1 select:focus,
				.wrapper.style1 textarea:focus {
					border-color: #fff;
				}

			.wrapper.style1 select {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(255, 255, 255, 0.25)' /%3E%3C/svg%3E");
			}

				.wrapper.style1 select option {
					color: #fff;
					background: #444;
				}

			.wrapper.style1 input[type="checkbox"] + label,
			.wrapper.style1 input[type="radio"] + label {
				color: #fff;
			}

				.wrapper.style1 input[type="checkbox"] + label:before,
				.wrapper.style1 input[type="radio"] + label:before {
					-moz-transition: border-color 0.2s ease-in-out;
					-webkit-transition: border-color 0.2s ease-in-out;
					-ms-transition: border-color 0.2s ease-in-out;
					transition: border-color 0.2s ease-in-out;
					background: rgba(255, 255, 255, 0.075);
					border-color: rgba(255, 255, 255, 0.25);
				}

			.wrapper.style1 input[type="checkbox"]:checked + label:before,
			.wrapper.style1 input[type="radio"]:checked + label:before {
				background-color: #fff;
				border-color: #fff;
				color: #444;
			}

			.wrapper.style1 input[type="checkbox"]:focus + label:before,
			.wrapper.style1 input[type="radio"]:focus + label:before {
				border-color: #fff;
			}

			.wrapper.style1 ::-webkit-input-placeholder {
				color: #888 !important;
			}

			.wrapper.style1 :-moz-placeholder {
				color: #888 !important;
			}

			.wrapper.style1 ::-moz-placeholder {
				color: #888 !important;
			}

			.wrapper.style1 :-ms-input-placeholder {
				color: #888 !important;
			}

			.wrapper.style1 .formerize-placeholder {
				color: #888 !important;
			}

			.wrapper.style1 .icon-wrapper {
				background-color: #fff;
				box-shadow: 0 -1px 0 0 #fff, 0 1px 0 0 #fff;
			}

				.wrapper.style1 .icon-wrapper:before {
					border-bottom-color: #fff;
				}

				.wrapper.style1 .icon-wrapper:after {
					border-top-color: #fff;
				}

				.wrapper.style1 .icon-wrapper .icon {
					color: #444;
				}

			.wrapper.style1 ul.alt li {
				border-top-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 ul.menu li {
				border-left-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 ul.pagination li > .page.active {
				background-color: #444;
				color: #fff !important;
			}

				.wrapper.style1 ul.pagination li > .page.active:hover {
					background-color: #515151;
				}

				.wrapper.style1 ul.pagination li > .page.active:active {
					background-color: #373737;
				}

			.wrapper.style1 .post .content {
				background-color: transparent;
				border: solid 1px #e6e6e6;
			}

			.wrapper.style1 table tbody tr {
				border-color: rgba(255, 255, 255, 0.25);
			}

				.wrapper.style1 table tbody tr:nth-child(2n + 1) {
					background-color: rgba(255, 255, 255, 0.075);
				}

			.wrapper.style1 table th {
				color: #fff;
			}

			.wrapper.style1 table thead {
				border-bottom-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 table tfoot {
				border-top-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 table.alt tbody tr td {
				border-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.style1 + .wrapper {
				border-top: 0;
			}

			.wrapper.style1.split > .inner > *:before {
				background-color: rgba(255, 255, 255, 0.25);
			}

		.wrapper.style2 {
			background-color: #f6f6f6;
			color: #444;
			border-top: 0;
		}

			.wrapper.style2 input, .wrapper.style2 select, .wrapper.style2 textarea {
				color: #444;
			}

			.wrapper.style2 a {
				color: #444;
			}

			.wrapper.style2 strong, .wrapper.style2 b {
				color: #444;
			}

			.wrapper.style2 h1, .wrapper.style2 h2, .wrapper.style2 h3, .wrapper.style2 h4, .wrapper.style2 h5, .wrapper.style2 h6 {
				color: #444;
			}

			.wrapper.style2 blockquote {
				border-left-color: #e6e6e6;
			}

			.wrapper.style2 code {
				background: rgba(144, 144, 144, 0.075);
				border-color: #e6e6e6;
			}

			.wrapper.style2 hr {
				border-bottom-color: #e6e6e6;
			}

			.wrapper.style2 .box {
				border-color: #e6e6e6;
			}

			.wrapper.style2 input[type="submit"],
			.wrapper.style2 input[type="reset"],
			.wrapper.style2 input[type="button"],
			.wrapper.style2 button,
			.wrapper.style2 .button {
				background-color: transparent;
				color: #444 !important;
				box-shadow: inset 0 0 0 1px #444;
			}

				.wrapper.style2 input[type="submit"]:hover,
				.wrapper.style2 input[type="reset"]:hover,
				.wrapper.style2 input[type="button"]:hover,
				.wrapper.style2 button:hover,
				.wrapper.style2 .button:hover {
					background-color: rgba(144, 144, 144, 0.075);
				}

				.wrapper.style2 input[type="submit"]:active,
				.wrapper.style2 input[type="reset"]:active,
				.wrapper.style2 input[type="button"]:active,
				.wrapper.style2 button:active,
				.wrapper.style2 .button:active {
					background-color: rgba(144, 144, 144, 0.2);
				}

				.wrapper.style2 input[type="submit"].primary,
				.wrapper.style2 input[type="reset"].primary,
				.wrapper.style2 input[type="button"].primary,
				.wrapper.style2 button.primary,
				.wrapper.style2 .button.primary {
					box-shadow: none;
					background-color: #444;
					color: #fff !important;
				}

					.wrapper.style2 input[type="submit"].primary:hover,
					.wrapper.style2 input[type="reset"].primary:hover,
					.wrapper.style2 input[type="button"].primary:hover,
					.wrapper.style2 button.primary:hover,
					.wrapper.style2 .button.primary:hover {
						background-color: #515151;
					}

					.wrapper.style2 input[type="submit"].primary:active,
					.wrapper.style2 input[type="reset"].primary:active,
					.wrapper.style2 input[type="button"].primary:active,
					.wrapper.style2 button.primary:active,
					.wrapper.style2 .button.primary:active {
						background-color: #373737;
					}

			.wrapper.style2 .features > section:before {
				background-color: #e6e6e6;
			}

			.wrapper.style2 label {
				color: #444;
			}

			.wrapper.style2 input[type="text"],
			.wrapper.style2 input[type="password"],
			.wrapper.style2 input[type="email"],
			.wrapper.style2 input[type="tel"],
			.wrapper.style2 input[type="search"],
			.wrapper.style2 input[type="url"],
			.wrapper.style2 select,
			.wrapper.style2 textarea {
				-moz-transition: border-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out;
				border-color: #e6e6e6;
			}

				.wrapper.style2 input[type="text"]:focus,
				.wrapper.style2 input[type="password"]:focus,
				.wrapper.style2 input[type="email"]:focus,
				.wrapper.style2 input[type="tel"]:focus,
				.wrapper.style2 input[type="search"]:focus,
				.wrapper.style2 input[type="url"]:focus,
				.wrapper.style2 select:focus,
				.wrapper.style2 textarea:focus {
					border-color: #444;
				}

			.wrapper.style2 select {
				background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='%23e6e6e6' /%3E%3C/svg%3E");
			}

				.wrapper.style2 select option {
					color: #444;
					background: #f6f6f6;
				}

			.wrapper.style2 input[type="checkbox"] + label,
			.wrapper.style2 input[type="radio"] + label {
				color: #444;
			}

				.wrapper.style2 input[type="checkbox"] + label:before,
				.wrapper.style2 input[type="radio"] + label:before {
					-moz-transition: border-color 0.2s ease-in-out;
					-webkit-transition: border-color 0.2s ease-in-out;
					-ms-transition: border-color 0.2s ease-in-out;
					transition: border-color 0.2s ease-in-out;
					background: rgba(144, 144, 144, 0.075);
					border-color: #e6e6e6;
				}

			.wrapper.style2 input[type="checkbox"]:checked + label:before,
			.wrapper.style2 input[type="radio"]:checked + label:before {
				background-color: #444;
				border-color: #444;
				color: #fff;
			}

			.wrapper.style2 input[type="checkbox"]:focus + label:before,
			.wrapper.style2 input[type="radio"]:focus + label:before {
				border-color: #444;
			}

			.wrapper.style2 ::-webkit-input-placeholder {
				color: #bbb !important;
			}

			.wrapper.style2 :-moz-placeholder {
				color: #bbb !important;
			}

			.wrapper.style2 ::-moz-placeholder {
				color: #bbb !important;
			}

			.wrapper.style2 :-ms-input-placeholder {
				color: #bbb !important;
			}

			.wrapper.style2 .formerize-placeholder {
				color: #bbb !important;
			}

			.wrapper.style2 .icon-wrapper {
				background-color: rgba(144, 144, 144, 0.075);
				box-shadow: 0 -1px 0 0 rgba(144, 144, 144, 0.075), 0 1px 0 0 rgba(144, 144, 144, 0.075);
			}

				.wrapper.style2 .icon-wrapper:before {
					border-bottom-color: rgba(144, 144, 144, 0.075);
				}

				.wrapper.style2 .icon-wrapper:after {
					border-top-color: rgba(144, 144, 144, 0.075);
				}

			.wrapper.style2 ul.alt li {
				border-top-color: #e6e6e6;
			}

			.wrapper.style2 ul.menu li {
				border-left-color: #e6e6e6;
			}

			.wrapper.style2 ul.pagination li > .page.active {
				background-color: #444;
				color: #fff !important;
			}

				.wrapper.style2 ul.pagination li > .page.active:hover {
					background-color: #515151;
				}

				.wrapper.style2 ul.pagination li > .page.active:active {
					background-color: #373737;
				}

			.wrapper.style2 .post .content {
				background-color: #fff;
				border: 0;
			}

			.wrapper.style2 table tbody tr {
				border-color: #e6e6e6;
			}

				.wrapper.style2 table tbody tr:nth-child(2n + 1) {
					background-color: rgba(144, 144, 144, 0.075);
				}

			.wrapper.style2 table th {
				color: #444;
			}

			.wrapper.style2 table thead {
				border-bottom-color: #e6e6e6;
			}

			.wrapper.style2 table tfoot {
				border-top-color: #e6e6e6;
			}

			.wrapper.style2 table.alt tbody tr td {
				border-color: #e6e6e6;
			}

			.wrapper.style2 + .wrapper {
				border-top: 0;
			}

			.wrapper.style2.split > .inner > *:before {
				background-color: #e6e6e6;
			}

		.wrapper.sidebar > .inner {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}

			.wrapper.sidebar > .inner > header {
				width: 100%;
			}

			.wrapper.sidebar > .inner > .content {
				width: 75%;
				padding: 0 4em 0 0;
			}

			.wrapper.sidebar > .inner > .sidebar {
				width: 25%;
			}

		.wrapper.sidebar.left > .inner {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

			.wrapper.sidebar.left > .inner > .content {
				padding: 0 0 0 4em;
			}

		@media screen and (max-width: 980px) {

			.wrapper.sidebar > .inner {
				-moz-flex-direction: row;
				-webkit-flex-direction: row;
				-ms-flex-direction: row;
				flex-direction: row;
			}

				.wrapper.sidebar > .inner > .content {
					width: 100%;
					padding: 0;
				}

				.wrapper.sidebar > .inner > .sidebar {
					border-top: solid 2px #e6e6e6;
					margin: 2em 0 0 0;
					padding: 4em 0 0 0;
					width: 100%;
				}

			.wrapper.sidebar.style1 > .inner > .sidebar {
				border-top-color: rgba(255, 255, 255, 0.25);
			}

			.wrapper.sidebar.style2 > .inner > .sidebar {
				border-top-color: #e6e6e6;
			}

		}

		@media screen and (max-width: 1280px) {

			.wrapper {
				padding: 3em 0 1em 0 ;
			}

				.wrapper > .inner {
					width: 100%;
					padding: 0 3em;
				}

				.wrapper.major-pad {
					padding: 4em 0 2em 0 ;
				}

				.wrapper.content-pad .content {
					padding: 3em 0 1em 0 ;
				}

				.wrapper.split > .inner > * {
					width: calc(50% - 2em);
				}

					.wrapper.split > .inner > *:before {
						margin-left: -2em;
					}

		}

		@media screen and (max-width: 980px) {

			.wrapper > .inner > * {
				width: 100%;
				padding-left: 0 !important;
			}

			.wrapper.split > .inner {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
			}

				.wrapper.split > .inner > * {
					width: 100%;
					padding-top: 3em;
					margin-top: 1em;
				}

					.wrapper.split > .inner > *:before {
						margin-left: 0;
						position: relative;
						height: 1px;
						width: 100%;
						top: -3em;
					}

					.wrapper.split > .inner > *:first-child {
						padding-top: 0;
						margin-top: 0;
					}

						.wrapper.split > .inner > *:first-child:before {
							display: none;
						}

		}

		@media screen and (max-width: 736px) {

			.wrapper {
				padding: 2.5em 0 0.5em 0 ;
			}

				.wrapper > .inner {
					padding: 0 1.5em;
				}

				.wrapper.major-pad {
					padding: 2.5em 0 0.5em 0 ;
				}

				.wrapper.content-pad .content {
					padding: 2.5em 0 0.5em 0 ;
				}

		}


/* Wrapper two inner */

#two .inner a {
  color: #DE5C84;
  text-decoration: none;
  border: 0;
  transition: color 0.35s ease-in-out;
}

#two .inner .content a:not(.button) {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

#two .inner .content a:not(.button)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #DE5C84,
    #d84a90,
    #7a4dd8,
    #2f6fe3
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

#two .inner .content a:not(.button):hover {
  color: #7a4dd8;
}

#two .inner .content a:not(.button):hover::after {
  transform: scaleX(1);
}

/* Header */

body {
	padding-top: 3.5em;
}

@-moz-keyframes reveal-header {
	0% {
		top: -4em;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-webkit-keyframes reveal-header {
	0% {
		top: -4em;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@-ms-keyframes reveal-header {
	0% {
		top: -4em;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

@keyframes reveal-header {
	0% {
		top: -4em;
		opacity: 0;
	}

	100% {
		top: 0;
		opacity: 1;
	}
}

#header {
	background-color: #fff;
	box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.35);

	/* fancier, elegant, still very readable */
	font-family: "Lora", serif;
	font-weight: 600;
	height: 3.5em;
	left: 0;
	line-height: 3.5em;
	position: fixed;
	text-transform: uppercase;
	top: 0;
	width: 100%;
	z-index: 10000;
}


#header h1 {
	height: inherit;
	left: 1.5em;
	line-height: inherit;
	margin: 0;
	padding-bottom: 0;
	position: relative;
	font-family: "Lora", serif;
	font-weight: 600;
	letter-spacing: 0.08em;
}

#header h1:after {
	display: none;
}

/* Header title – lighter rose, smooth outline, refined transition */
#header h1 a {
	color: #c98aa3;          /* lighter pastel rose */
	text-decoration: none;
	border-bottom: 0;
	background: none;

	/* smooth white outline (layered, not harsh) */
	text-shadow:
		-1px -1px 1px rgba(255, 255, 255, 0.32),
		 1px -1px 1px rgba(255, 255, 255, 0.32),
		-1px  1px 1px rgba(255, 255, 255, 0.32),
		 1px  1px 1px rgba(255, 255, 255, 0.32),
		 0 0 2px rgba(255, 255, 255, 0.22);

	/* smooth, editorial transition (soft fade) */
	transition:
		color 0.6s cubic-bezier(0.18, 0.95, 0.25, 1),
		text-shadow 0.6s cubic-bezier(0.18, 0.95, 0.25, 1);
}

#header h1 a span {
	font-weight: 500;
}

/* Hover – smooth rose outline + rosy glow (soft & elegant) */
#header h1 a:hover {
	color: #ffffff;

	text-shadow:
		/* smooth rose outline */
		-1px -1px 1px rgba(201, 138, 163, 0.38),
		 1px -1px 1px rgba(201, 138, 163, 0.38),
		-1px  1px 1px rgba(201, 138, 163, 0.38),
		 1px  1px 1px rgba(201, 138, 163, 0.38),

		/* soft feathering */
		0 0 2px rgba(201, 138, 163, 0.30),

		/* rosy glow behind */
		0 0 10px rgba(201, 138, 163, 0.32),
		0 0 22px rgba(201, 138, 163, 0.20);
}


#header nav {
	height: inherit;
	line-height: inherit;
	position: absolute;
	right: 1.5em;
	top: 0;
}

#header nav > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#header nav > ul > li {
	display: inline-block;
	margin-left: 2em;
	padding: 0;
}

#header nav > ul > li > ul {
	display: none;
}

#header nav > ul > li a {
	text-decoration: none;
	border-bottom: 0;
}

#header nav > ul > li a:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

#header nav > ul > li a:before {
	margin-right: 0.75em;
}

#header nav > ul > li:first-child {
	margin-left: 0;
}

#header .navPanelToggle {
	text-decoration: none;
	border: 0;
	height: 4em;
	position: absolute;
	right: 0;
	top: 0;
	width: 5em;
	display: none;
}

#header .navPanelToggle:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

#header .navPanelToggle:before {
	content: '\f0c9';
	width: 3em;
	height: 3em;
	display: block;
	line-height: inherit;
	position: absolute;
	right: 0;
	top: 0;
	text-align: center;
}

#header + #banner {
	margin-top: -3.5em;
}

#header.reveal {
	-moz-animation: reveal-header 0.5s ease;
	-webkit-animation: reveal-header 0.5s ease;
	-ms-animation: reveal-header 0.5s ease;
	animation: reveal-header 0.5s ease;
}

#header.alt {
	background-color: #444;
	color: #fff;
	-moz-animation: none;
	-webkit-animation: none;
	-ms-animation: none;
	animation: none;
	background-color: transparent;
	box-shadow: none;
	overflow: hidden;
	position: absolute;
	top: 1.5em;
}

#header.alt input[type="submit"],
#header.alt input[type="reset"],
#header.alt input[type="button"],
#header.alt button,
#header.alt .button {
	background-color: transparent;
	color: #fff !important;
	box-shadow: inset 0 0 0 1px #fff;
}

#header.alt input[type="submit"]:hover,
#header.alt input[type="reset"]:hover,
#header.alt input[type="button"]:hover,
#header.alt button:hover,
#header.alt .button:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

#header.alt input[type="submit"]:active,
#header.alt input[type="reset"]:active,
#header.alt input[type="button"]:active,
#header.alt button:active,
#header.alt .button:active {
	background-color: rgba(255, 255, 255, 0.2);
}

#header.alt input[type="submit"].primary,
#header.alt input[type="reset"].primary,
#header.alt input[type="button"].primary,
#header.alt button.primary,
#header.alt .button.primary {
	box-shadow: none;
	background-color: #fff;
	color: #444 !important;
}

#header.alt input,
#header.alt select,
#header.alt textarea {
	color: #fff;
}

#header.alt a {
	color: #fff;
}

#header.alt strong,
#header.alt b {
	color: #fff;
}

#header.alt h1,
#header.alt h2,
#header.alt h3,
#header.alt h4,
#header.alt h5,
#header.alt h6 {
	color: #fff;
}

#header.alt blockquote {
	border-left-color: rgba(255, 255, 255, 0.25);
}

#header.alt code {
	background: rgba(255, 255, 255, 0.075);
	border-color: rgba(255, 255, 255, 0.25);
}

#header.alt hr {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

#header.alt h1 {
	left: 2.5em;
}

#header.alt nav {
	right: 2.5em;
}

/* Header title – ALT state (Option D: warm rose glow) */
#header.alt h1 a {
	color: #c98aa3;          /* same pastel rose as normal header */
	text-decoration: none;
	border-bottom: 0;
	background: none;

	/* subtle white outline for readability */
	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.22),
		 1px -1px 0 rgba(255, 255, 255, 0.22),
		-1px  1px 0 rgba(255, 255, 255, 0.22),
		 1px  1px 0 rgba(255, 255, 255, 0.22);

transition:
	color 0.65s cubic-bezier(0.18, 0.95, 0.25, 1),
	text-shadow 0.65s cubic-bezier(0.18, 0.95, 0.25, 1);
}

/* ALT Hover – smooth rose outline + rosy glow (soft, not harsh) */
#header.alt h1 a:hover {
	color: #ffffff;

	text-shadow:
		/* smooth rose outline (layered, not sharp) */
		-1px -1px 1px rgba(201, 138, 163, 0.40),
		 1px -1px 1px rgba(201, 138, 163, 0.40),
		-1px  1px 1px rgba(201, 138, 163, 0.40),
		 1px  1px 1px rgba(201, 138, 163, 0.40),

		/* extra soft feathering for smoothness */
		0 0 2px rgba(201, 138, 163, 0.30),

		/* rosy glow behind */
		0 0 10px rgba(201, 138, 163, 0.35),
		0 0 22px rgba(201, 138, 163, 0.22);
}

@media screen and (max-width: 1280px) {
	#header.alt {
		top: 0.75em;
	}

	#header.alt h1 {
		left: 1.5em;
	}

	#header.alt nav {
		right: 1.5em;
	}
}

@media screen and (max-width: 980px) {
	#header.alt {
		top: 0;
	}

	#header nav {
		display: none;
	}

	#header .navPanelToggle {
		display: block;
	}
}

@media screen and (max-width: 736px) {
	#header {
		height: 3em;
		line-height: 3em;
	}

	#header h1 {
		left: 1em !important;
	}

	#header h1 a {
		font-size: 0.9em;
	}
}

.dropotron {
	list-style: none;
	padding: 0;
	background: #fff;
	color: #444;
	min-width: 13em;
	padding: 0.75em;
	margin-top: -0.5em;
        font-family: "Lora", serif;
	font-weight: 600;
	text-transform: uppercase;
	box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.35);
}

.dropotron li {
	box-shadow: inset 0 1px 0 0 #e6e6e6;
}

.dropotron li:first-child {
	box-shadow: none;
}

.dropotron a {
	color: inherit;
	text-decoration: none;
	letter-spacing: 0.05em;
	font-size: 0.8em;
	display: block;
	line-height: 3em;
	border: 0;
}

.dropotron.level-0 {
	margin-top: 0;
}

.dropotron.level-0:before {
	content: '';
	border-left: solid 0.5em transparent;
	border-right: solid 0.5em transparent;
	border-bottom: solid 0.5em #fff;
	display: block;
	position: absolute;
	top: -0.45em;
	left: 50%;
	margin-left: -0.25em;
}

/* Header background: pastel navy → lilac gradient */
#header {
	background: linear-gradient(
		90deg,
		#e7e5f1 0%,
		#e5e3f0 60%,
		#e2e0f0 100%
	);
	color: #5a5690; /* CHANGED (was #4a466f) - tiny bit more lilac + lighter */
}

#header.alt {
	background: linear-gradient(
		90deg,
		#e7e5f1,
		#e5e3f0,
		#e2e0f0
	);
	color: #5a5690; /* CHANGED (was #4a466f) - same as header */
}

/* Top navigation links – unchanged from last version (ONLY COLOR adjusted) */
#header nav > ul > li > a,
#header.alt nav > ul > li > a {
	color: #6a64ad; /* CHANGED (was #59558c) - slightly lighter + more lilac */
	position: relative;
	border-bottom: 0;
	padding-bottom: 0.4em;

	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.12),
		 1px -1px 0 rgba(255, 255, 255, 0.12),
		-1px  1px 0 rgba(255, 255, 255, 0.12),
		 1px  1px 0 rgba(255, 255, 255, 0.12),
		 0 4px 10px rgba(30, 22, 78, 0.10);

	transition:
		outline-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Underline removed */
#header nav > ul > li > a:after,
#header.alt nav > ul > li > a:after {
	content: none;
}

/* Hover ring: neutral lavender/white, soft fade */
#header nav > ul > li > a,
#header.alt nav > ul > li > a {
	outline: 2px solid rgba(255, 255, 255, 0);
	outline-offset: 5px;
	box-shadow: none;
	border-radius: 999px;
}

#header nav > ul > li:hover > a,
#header nav > ul > li.active > a,
#header nav > ul > li.current > a,
#header.alt nav > ul > li:hover > a,
#header.alt nav > ul > li.active > a,
#header.alt nav > ul > li.current > a {
	outline-color: rgba(255, 255, 255, 0.22);
	box-shadow:
		0 10px 18px rgba(30, 22, 78, 0.10);
}

/* Dropdown background (grey-lilac, readable, rounded) – unchanged */
.dropotron {
	background: #f0edf8;
	color: #6a64ad; /* CHANGED (was #59558c) */
	box-shadow: 0 14px 34px rgba(30, 22, 78, 0.14);
	border-radius: 12px;
}

/* Dropdown arrow */
.dropotron.level-0:before {
	border-bottom-color: #f0edf8;
}

/* Dropdown links – unchanged (ONLY COLOR adjusted) */
.dropotron a {
	color: #6a64ad !important; /* CHANGED (was #59558c) */
	text-shadow:
		-1px -1px 0 rgba(255, 255, 255, 0.12),
		 1px -1px 0 rgba(255, 255, 255, 0.12),
		-1px  1px 0 rgba(255, 255, 255, 0.12),
		 1px  1px 0 rgba(255, 255, 255, 0.12),
		 0 4px 10px rgba(30, 22, 78, 0.10);
}

/* Dropdown hover (ONLY COLOR adjusted) */
.dropotron li:hover > a {
	background: rgba(106, 100, 173, 0.12); /* CHANGED (was rgba(89, 85, 140, 0.12)) */
}

/* === Remove top gap for header (safe) === */
#header {
	top: 0;
}

#header.alt {
	top: 0;
}

/* ============================
   MOONY MOBILE NAV + ICON FIX
   ============================ */

#navPanel {
	background: linear-gradient(
		180deg,
		#5c5878 0%,
		#54506f 60%,
		#4c4867 100%
	) !important;

	color: rgba(255, 255, 255, 0.82);
}

#navPanel .link {
	font-family: "Raleway", Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: 0.08em;

	color: rgba(255, 255, 255, 0.84) !important;
	border-top-color: rgba(255, 255, 255, 0.14);

	text-shadow: none;
}

/* Sub-links (under headings): lighter weight */
#navPanel .link.depth-1,
#navPanel .link.depth-2,
#navPanel .link.depth-3 {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.75) !important;
	letter-spacing: 0.07em;
}

/* FIX: top-level headings = pure white */
#navPanel .link.depth-0,
#navPanel .link.level-0,
#navPanel .link:not(.depth-1):not(.depth-2):not(.depth-3) {
	color: #ffffff !important;
	font-weight: 700;
}

#navPanel .link:hover,
#navPanel .link.active {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.90) !important;
}

#navPanel .close {
	color: rgba(255, 255, 255, 0.90) !important;
}

#header .navPanelToggle:before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #5a5690 !important;
}

/* NAVPANEL: niemals Unterline/Fancy-After */
#navPanel a,
#navPanel a.link,
#navPanel .link{
  border-bottom: 0 !important;
  text-decoration: none !important;
}

#navPanel a::after,
#navPanel a.link::after,
#navPanel .link::after{
  content: none !important;
  display: none !important;
}

/* ============================
   FIX: Header title shrinks EARLIER (Option B + extra)
   - Nav stays original (2em) until 1920px
   - Add one extra shrink BEFORE 1700px
   - NO ellipsis
   - h1 less tiny near 1024px
   ============================ */

/* keep the title fully visible (no "...") */
@media screen and (max-width: 1024px) {
	#header h1 {
		max-width: none;
		white-space: nowrap;
		overflow: visible;
		text-overflow: clip;
	}
}

@media screen and (max-width: 2100px) {
	#header h1 a {
		font-size: 0.94em;
		letter-spacing: 0.10em;
	}
}

@media screen and (max-width: 1920px) {
	#header h1 a {
		font-size: 0.88em;
		letter-spacing: 0.09em;
	}
}

/* catches the “moment” shortly before 1700px */
@media screen and (max-width: 1760px) {
	#header h1 a {
		font-size: 0.85em;
		letter-spacing: 0.085em;
	}
}

/* Now we start tightening nav spacing */
@media screen and (max-width: 1700px) {
	#header h1 a {
		font-size: 0.82em;
		letter-spacing: 0.08em;
	}

	#header nav > ul > li {
		margin-left: 1.55em;
	}
}

@media screen and (max-width: 1500px) {
	#header h1 a {
		font-size: 0.78em;
		letter-spacing: 0.075em;
	}

	#header nav > ul > li {
		margin-left: 1.25em;
	}
}

@media screen and (max-width: 1320px) {
	#header h1 a {
		font-size: 0.72em;
		letter-spacing: 0.06em;
	}

	#header nav > ul > li {
		margin-left: 1.05em;
	}

	#header nav > ul > li > a {
		font-size: 0.88em;
		letter-spacing: 0.05em;
	}
}

@media screen and (max-width: 1180px) {
	#header h1 a {
		font-size: 0.66em;
		letter-spacing: 0.05em;
	}

	#header nav > ul > li {
		margin-left: 0.85em;
	}

	#header nav > ul > li > a {
		font-size: 0.80em;
		letter-spacing: 0.03em;
	}
}

/* Smallest range where nav is still visible (1024–1180):
   keep h1 a bit bigger, tighten nav spacing more */
@media screen and (max-width: 1024px) {
	#header h1 a {
		font-size: 0.68em;
		letter-spacing: 0.045em;
	}

	#header nav > ul > li {
		margin-left: 0.65em;
	}
}


/* --- Wissenswertes Sidebar (scoped) --- */
.sidebar .sidebartrivia{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 40px;
}

.sidebar .sidebartrivia__item{
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(135deg, #F6E9FF, #FFE9F6);
  border: 1px solid rgba(200,162,232,.45);
  box-shadow: 0 6px 18px rgba(200,162,232,.12);

  transition: transform .12s ease, box-shadow .12s ease;
}

.sidebar .sidebartrivia__icon{
  width: 26px;
  height: 26px;
  border-radius: 9px;
  display: grid;
  place-items: center;

  background: #C8A2E8;
  color: #fff;
  font-size: 13px;

  flex: 0 0 auto;
}

.sidebar .sidebartrivia__text{
  color: #5a3d6f;
  font-weight: 600;

  font-size: 0.95rem;
  line-height: 1.25;
  min-width: 0;

  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;

  text-align: left;
}

/* Hover nur in dieser Komponente */
.sidebar .sidebartrivia__item:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(200,162,232,.18);
}

/* 2 Spalten nur auf sehr großen Screens */
.sidebar .sidebartrivia{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Ab 1680px und kleiner → 1 Spalte */
@media (max-width: 1680px){
  .sidebar .sidebartrivia{
    grid-template-columns: 1fr;
  }
}

/* Astro Page */

.astro-page {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
    padding: 40px 20px;
    color: #edf3ff;
    font-family: 'Segoe UI', Arial, sans-serif;
    overflow: hidden;
    isolation: isolate;
}

/* Statischer Hintergrund mit kleinen Sternen */
.astro-page::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 28px;
    z-index: -3;
    background:
        radial-gradient(circle at top, rgba(63, 91, 170, 0.18), transparent 35%),
        radial-gradient(circle at bottom, rgba(96, 45, 145, 0.14), transparent 30%),
        radial-gradient(circle at 40px 50px, rgba(255,255,255,0.85) 1px, transparent 1.6px),
        radial-gradient(circle at 140px 120px, rgba(255,255,255,0.65) 1px, transparent 1.7px),
        radial-gradient(circle at 260px 80px, rgba(255,255,255,0.8) 1.2px, transparent 1.8px),
        radial-gradient(circle at 380px 160px, rgba(255,255,255,0.55) 1px, transparent 1.7px),
        radial-gradient(circle at 520px 60px, rgba(255,255,255,0.78) 1.1px, transparent 1.8px),
        radial-gradient(circle at 680px 140px, rgba(255,255,255,0.7) 1px, transparent 1.7px),
        radial-gradient(circle at 820px 90px, rgba(255,255,255,0.82) 1.1px, transparent 1.8px),
        radial-gradient(circle at 980px 180px, rgba(255,255,255,0.6) 1px, transparent 1.7px),
        radial-gradient(circle at 120px 260px, rgba(170,210,255,0.65) 1px, transparent 1.7px),
        radial-gradient(circle at 300px 320px, rgba(255,255,255,0.72) 1.1px, transparent 1.8px),
        radial-gradient(circle at 470px 260px, rgba(255,255,255,0.58) 1px, transparent 1.7px),
        radial-gradient(circle at 610px 300px, rgba(190,220,255,0.7) 1.1px, transparent 1.8px),
        radial-gradient(circle at 760px 250px, rgba(255,255,255,0.75) 1px, transparent 1.7px),
        radial-gradient(circle at 930px 330px, rgba(255,255,255,0.62) 1px, transparent 1.7px),
        linear-gradient(180deg, #070b18 0%, #0a1022 45%, #060914 100%);
    background-repeat: repeat;
    background-size: auto, auto, 1100px 420px, 1100px 420px, 1100px 420px, 1100px 420px,
                     1100px 420px, 1100px 420px, 1100px 420px, 1100px 420px,
                     1100px 420px, 1100px 420px, 1100px 420px, 1100px 420px,
                     1100px 420px, 1100px 420px, auto;
}

/* Intro Box */
.astro-intro {
    position: relative;
    margin-bottom: 34px;
    padding: 30px 28px;
    background: linear-gradient(145deg, rgba(19, 27, 60, 0.96), rgba(11, 16, 38, 0.96));
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 26px;
    box-shadow:
        0 20px 50px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

.astro-intro::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -80px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(123, 167, 255, 0.22), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.astro-intro::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, #90b8ff, #c499ff, #7ee7ff);
    border-radius: 20px 0 0 20px;
}

.intro-badge {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #dbe8ff;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
}

.astro-intro h3 {
    margin: 0 0 16px;
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
}

.astro-intro p {
    margin: 0 0 14px;
    line-height: 1.85;
    color: #d8e4ff;
}

.astro-title {
    margin: 0 0 22px;
    font-size: 1.5rem;
    text-align: center;
    color: #ffffff;
    letter-spacing: 0.4px;
}

/* Grid */
.planet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 22px;
}

/* Karten */
.planet-card {
    position: relative;
    padding: 22px 20px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(16, 22, 48, 0.92), rgba(8, 12, 28, 0.95));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        0 14px 35px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(6px);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

.planet-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.09), transparent 30%),
        radial-gradient(circle at bottom left, rgba(132, 171, 255, 0.08), transparent 35%);
    opacity: 0.9;
    pointer-events: none;
}

.planet-card::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.planet-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255,255,255,0.17);
    box-shadow:
        0 20px 45px rgba(0,0,0,0.32),
        0 0 20px rgba(120, 160, 255, 0.12);
}

.planet-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    font-size: 1.9rem;
    font-weight: 700;
    color: #ffffff;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.05),
        0 0 18px rgba(255,255,255,0.05);
}

.planet-card h3 {
    margin: 0 0 12px;
    font-size: 1.2rem;
    color: #ffffff;
}

.planet-card p {
    margin: 0 0 12px;
    line-height: 1.75;
    color: #d6e2ff;
    position: relative;
    z-index: 1;
}

.planet-card .distance {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-weight: 600;
    color: #ffd978;
}

/* Farbige Akzente pro Planet */
.mercury .planet-symbol {
    color: #f4eee2;
    box-shadow: 0 0 20px rgba(220, 207, 185, 0.18);
}

.venus .planet-symbol {
    color: #ffd98f;
    box-shadow: 0 0 20px rgba(255, 211, 128, 0.18);
}

.earth .planet-symbol {
    color: #96c8ff;
    box-shadow: 0 0 20px rgba(120, 180, 255, 0.2);
}

.mars .planet-symbol {
    color: #ff9e8d;
    box-shadow: 0 0 20px rgba(255, 120, 102, 0.2);
}

.jupiter .planet-symbol {
    color: #ffbf88;
    box-shadow: 0 0 20px rgba(255, 175, 115, 0.2);
}

.saturn .planet-symbol {
    color: #f1dcaa;
    box-shadow: 0 0 20px rgba(238, 211, 148, 0.18);
}

.uranus .planet-symbol {
    color: #9fe9ff;
    box-shadow: 0 0 20px rgba(137, 232, 255, 0.2);
}

.neptune .planet-symbol {
    color: #8eb2ff;
    box-shadow: 0 0 20px rgba(100, 138, 255, 0.2);
}

.dwarf .planet-symbol {
    color: #e8eeff;
    box-shadow: 0 0 20px rgba(210, 220, 255, 0.18);
}

.moon .planet-symbol {
    color: #e6ecff;
    box-shadow: 0 0 20px rgba(220, 230, 255, 0.25);
}

.moon {
    border: 1px solid rgba(220, 230, 255, 0.15);
}

.sun .planet-symbol {
    color: #ffd66b;
    box-shadow: 0 0 25px rgba(255, 200, 80, 0.35);
}

.sun {
    border: 1px solid rgba(255, 200, 80, 0.18);
}

/* Responsive */
@media (max-width: 768px) {
    .astro-page {
        padding: 24px 14px;
    }

    .astro-intro {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .astro-intro h3 {
        font-size: 1.55rem;
    }

    .astro-title {
        font-size: 1.3rem;
    }

    .planet-grid {
        gap: 16px;
    }

    .planet-card {
        padding: 18px;
        border-radius: 18px;
    }

    .planet-symbol {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }
}

.astro-source {
    margin-top: 45px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    font-size: 0.85rem;
    line-height: 1.6;
    color: #9aa4c2;
}

.astro-source strong {
    color: #c7d2ff;
    font-weight: 600;
}

.astro-source em {
    font-style: italic;
    color: #b9c4e8;
}

.astro-source a {
    color: #8fa1d6;
    text-decoration: none;
}

.astro-source a:hover {
    text-decoration: underline;
}

/* Shoutbox */

.moon-page-title {
    text-align: center;
    margin-bottom: 30px;
}

.moon-page-title h2 {
    margin-bottom: 6px;
}

.moon-page-title h4 {
    font-weight: 400;
    opacity: 0.85;
}


/* Banner */

	#banner {
		color: #fff;
		min-height: 40em;
		height: 75vh;
		position: relative;
                border-bottom: 3px solid rgba(0, 0, 0, 0.05);
	}

		#banner input, #banner select, #banner textarea {
			color: #fff;
		}

		#banner a {
			color: #fff;
		}

		#banner strong, #banner b {
			color: #fff;
		}

		#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 {
			color: #fff;
		}

		#banner blockquote {
			border-left-color: rgba(255, 255, 255, 0.25);
		}

		#banner code {
			background: rgba(255, 255, 255, 0.075);
			border-color: rgba(255, 255, 255, 0.25);
		}

		#banner hr {
			border-bottom-color: rgba(255, 255, 255, 0.25);
		}

		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			-webkit-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			-ms-transition: opacity 1.5s ease-in-out, visibility 1.5s;
			transition: opacity 1.5s ease-in-out, visibility 1.5s;
			background: #000511;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			visibility: hidden;
			width: 100%;
			z-index: 2;
		}

		#banner .indicators {
			bottom: 1.5em;
			left: 0;
			list-style: none;
			margin: 0;
			padding: 0;
			position: absolute;
			text-align: center;
			width: 100%;
			z-index: 2;
		}

			#banner .indicators li {
				cursor: pointer;
				display: inline-block;
				height: 2em;
				overflow: hidden;
				padding: 0;
				position: relative;
				text-indent: -6em;
				width: 2em;
			}

				#banner .indicators li:before {
					background: rgba(255, 255, 255, 0.35);
					border-radius: 100%;
					content: '';
					display: inline-block;
					height: 0.8em;
					left: 50%;
					margin: -0.4em 0 0 -0.4em;
					position: absolute;
					text-indent: 0;
					top: 50%;
					width: 0.8em;
				}

				#banner .indicators li.visible:before {
					background: #fff;
				}

		#banner > article {
			-moz-transition: opacity 1.5s ease, visibility 1.5s;
			-webkit-transition: opacity 1.5s ease, visibility 1.5s;
			-ms-transition: opacity 1.5s ease, visibility 1.5s;
			transition: opacity 1.5s ease, visibility 1.5s;
			background-attachment: fixed;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			text-align: center;
			top: 0;
			visibility: hidden;
			width: 100%;
			z-index: 0;
		}

			#banner > article:before {
				content: '';
				display: inline-block;
				height: 100%;
				vertical-align: middle;
			}

			#banner > article:after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			#banner > article .inner {
				position: relative;
				display: inline-block;
				vertical-align: middle;
				z-index: 1;
			}

				#banner > article .inner > :last-child {
					margin-bottom: 0;
				}

			#banner > article h2 {
				font-weight: 800;
				font-size: 2.75em;
				padding-bottom: 0;
				margin: 0 0 0.5em 0;
			}

				#banner > article h2:after {
					display: none;
				}

			#banner > article img {
				display: none;
			}

			#banner > article.visible {
				opacity: 1;
				visibility: visible;
			}

			#banner > article.top {
				z-index: 1;
			}

			#banner > article.instant {
				-moz-transition: none !important;
				-webkit-transition: none !important;
				-ms-transition: none !important;
				transition: none !important;
			}


		@media screen and (max-width: 1280px) {

			#banner {
				min-height: 35em;
				height: 60vh;
			}

				#banner > article h2 {
					font-size: 2.25em;
				}

		}

		@media screen and (max-width: 980px) {

			#banner {
				min-height: 50em;
				height: 75vh;
			}

				#banner > article {
					background-attachment: scroll;
				}

		}

		@media screen and (max-width: 736px) {

			#banner {
				min-height: 25em;
			}

				#banner > article .inner {
					width: 90%;
				}

				#banner > article h2 {
					font-size: 1.75em;
					line-height: 1.25em;
				}

		}

		body.is-mobile #banner > article {
			background-attachment: scroll;
		}



/* ============================
   MOONY BANNER HEADLINES v9
   Unified font & style
   ============================ */

#banner > article h2 .banner-title {
	font-family: "Cinzel", serif;
	font-size: 1.25em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	display: inline-block;

	background: none;
	-webkit-background-clip: initial;
	-webkit-text-fill-color: initial;

	text-shadow:
		-1px -1px 0 #d59ac5,
		 1px -1px 0 #d59ac5,
		-1px  1px 0 #d59ac5,
		 1px  1px 0 #d59ac5,
		 2px  2px 4px rgba(0, 0, 0, 0.65);

	/* wichtig für smooth hover */
	transform: translate3d(0, 0, 0) scale(1);
	transition:
		transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
		text-shadow 0.28s ease;
}

#banner > article h2 .banner-title:hover {
	transform: translate3d(0, -4px, 0) scale(1.02);

	text-shadow:
		-1px -1px 0 #d59ac5,
		 1px -1px 0 #d59ac5,
		-1px  1px 0 #d59ac5,
		 1px  1px 0 #d59ac5,
		 4px  6px 10px rgba(0, 0, 0, 0.7);
}

#banner > article .subtitle {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 1.5em;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.98);
	max-width: 46rem;
	margin: 0.6em auto 0 auto;

	text-shadow:
		/* soft pink outline */
		-1px -1px 0 rgba(213, 154, 197, 0.8),
		 1px -1px 0 rgba(213, 154, 197, 0.8),
		-1px  1px 0 rgba(213, 154, 197, 0.8),
		 1px  1px 0 rgba(213, 154, 197, 0.8),

		/* smoother, rounder depth */
		0 2px 6px rgba(0, 0, 0, 0.55),
		0 4px 10px rgba(0, 0, 0, 0.35);
}


/* ============================
   MOONY: Full Starfield + Light Glass Layer (ALWAYS VISIBLE)
   ============================ */

/* create stable stacking context */
#banner {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

/* make sure slides sit BELOW the star layer */
#banner > article { z-index: 1; }
#banner > article.top { z-index: 2; }

/* Starfield + glass layer (independent, ABOVE slides) */
#banner:before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* IMPORTANT: above slides, below text */
	z-index: 3;

	background:
		/* Star layer 1 (bigger stars, repeating) */
		radial-gradient(3.5px 3.5px at 18px 24px, rgba(255,255,255,0.95), transparent 60%),
		radial-gradient(3px 3px at 130px 90px, rgba(255,255,255,0.85), transparent 60%),
		radial-gradient(4px 4px at 260px 170px, rgba(255,255,255,0.92), transparent 60%),
		radial-gradient(3px 3px at 360px 40px, rgba(255,255,255,0.82), transparent 60%),

		/* Star layer 2 (small filler stars, repeating) */
		radial-gradient(2px 2px at 40px 200px, rgba(255,255,255,0.65), transparent 60%),
		radial-gradient(1.8px 1.8px at 210px 240px, rgba(255,255,255,0.6), transparent 60%),
		radial-gradient(2px 2px at 320px 260px, rgba(255,255,255,0.62), transparent 60%),
		radial-gradient(1.6px 1.6px at 380px 140px, rgba(255,255,255,0.55), transparent 60%),

linear-gradient(
	135deg,
	rgba(255,255,255,0.04) 0%,
	rgba(255,255,255,0.02) 42%,
	rgba(255,255,255,0.01) 60%,
	rgba(255,255,255,0.03) 100%
),

linear-gradient(
	180deg,
	rgba(120, 160, 255, 0.03),
	rgba(255, 170, 225, 0.025)
);

	/* Fill the entire banner */
	background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;

	/* Tile size controls density (smaller = more stars) */
	background-size:
		420px 300px,
		420px 300px,
		420px 300px,
		420px 300px,

		320px 260px,
		320px 260px,
		320px 260px,
		320px 260px,

		100% 100%,
		100% 100%;

	/* Make layer render consistently */
	will-change: background-position, opacity;
	transform: translateZ(0);
	backface-visibility: hidden;

	opacity: 0.96;

	/* Gentle movement (no layout shift) */
	animation: moonyStarsDrift 26s linear infinite;
}

/* Drift the repeating starfield slowly */
@keyframes moonyStarsDrift {
	0% {
		background-position:
			0px 0px, 0px 0px, 0px 0px, 0px 0px,
			0px 0px, 0px 0px, 0px 0px 0px,
			0 0, 0 0;
	}
	100% {
		background-position:
			-220px 120px, -160px 80px, -260px 140px, -200px 60px,
			-140px 90px, -200px 130px, -170px 110px, -240px 100px,
			0 0, 0 0;
	}
}

/* Ensure your banner text stays above stars/glass */
#banner > article .inner {
	position: relative;
	z-index: 4;
}


/* Main */

	#main {
		padding: 6em 0 4em 0 ;
	}

		#main > .inner > header.major:first-child {
			margin-bottom: 6em;
		}

		@media screen and (max-width: 1280px) {

			#main {
				padding: 4em 0 2em 0 ;
			}

				#main > .inner > header.major:first-child {
					margin-bottom: 4em;
				}

		}

		@media screen and (max-width: 736px) {

			#main {
				padding: 2.5em 0 0.5em 0 ;
			}

				#main > .inner > header.major:first-child {
					margin-bottom: 2.5em;
				}

		}

/* ================================================= */
/* Sailor Moon – Major Headline  */
/* ================================================= */

header.major h2 {
	font-weight: 500;
	font-family: "Raleway", sans-serif;
	display: inline-block;

	font-size: 3.0em;
	line-height: 1.1em;
	text-transform: uppercase;

	/* Rosa minimal dunkler, Lila weich & ruhig */
	background: radial-gradient(
		circle at top,
		#e28abb,   /* darker soft pink */
		#c28fe6,   /* light lilac */
		#7a4ca6    /* gentle purple base */
	);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
    margin: 0;
}


h2 {
	font-weight: 500;
	font-family: "Raleway", sans-serif;
	display: inline-block;

	font-size: 3.0em;
	line-height: 1.1em;
	text-transform: uppercase;

	/* Rosa */
	background: radial-gradient(
		circle at top,
		#e28abb,   /* darker soft pink */
		#c28fe6,   /* light lilac */
		#7a4ca6    /* gentle purple base */
	);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
    margin: 0;
}

@media screen and (max-width: 900px) {

	header.major h2 {
		display: block;
		width: 100%;
		font-size: 2.2em;
		line-height: 1.2;
		word-break: normal;
		overflow-wrap: break-word;
	}
}


/* =========================
Buttons
========================= */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    position: relative;
    display: inline-block;
    font-family: "Raleway", sans-serif;

    /* Lilac */
    background-color: rgba(225, 210, 245, 0.95);
    border: 0;

    /* Lilac strong */
    color: #5a1c9a !important;

    text-align: center;
    text-decoration: none;
    cursor: pointer;
    outline: 0;

    border-radius: 0.5em;
    padding: 0.65em 3em;
    font-weight: 600;

    /* weiße Kontur für Lesbarkeit */
    text-shadow:
        -1px -1px 0 rgba(255,255,255,0.95),
         1px -1px 0 rgba(255,255,255,0.95),
        -1px  1px 0 rgba(255,255,255,0.95),
         1px  1px 0 rgba(255,255,255,0.95),
         0 0 6px rgba(255,255,255,0.55);

    overflow: hidden;

    transition:
        background-color 0.35s ease-in-out,
        color 0.35s ease-in-out;
}

/* Sweep */
input[type="button"]::after,
input[type="submit"]::after,
input[type="reset"]::after,
button:not(.lg-icon)::after,
.button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

/* Hover – minimal intensiver */
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
    background-color: rgba(210, 185, 235, 1);
    color: #4b1685 !important;
}

input[type="button"]:hover::after,
input[type="submit"]:hover::after,
input[type="reset"]:hover::after,
button:not(.lg-icon):hover::after,
.button:hover::after {
    left: 140%;
}

/* Active */
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active {
    background-color: rgba(195, 170, 220, 0.95);
}


/* =========================
   FIX: Button inside .posts/.post
   (no size/font changes)
========================= */

.posts .post ul.actions .button {
  background-color: rgba(225, 210, 245, 0.95) !important; /* pastel lila */
  color: #5a1c9a !important;                              /* kräftige lila schrift */
  border: 0 !important;
  box-shadow: none !important;                            /* kill inset outlines */
  text-decoration: none !important;

  position: relative;   /* für sweep */
  overflow: hidden;     /* sweep bleibt innen */
  border-radius: 0.5em; /* wie gewünscht */
}

/* falls ein anderes CSS den Link-Hover "schwarz" färbt */
.posts .post ul.actions .button:hover {
  background-color: rgba(210, 185, 235, 1) !important;
  color: #4b1685 !important;
}

/* Sweep */
.posts .post ul.actions .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}

.posts .post ul.actions .button:hover::after {
  left: 140%;
}


/* Footer */


#footer {
	padding: 4em 0 2em 0;
	position: relative;

	background: linear-gradient(
		180deg,
		#5c5878 0%,
		#54506f 60%,
		#4c4867 100%
	);

	color: rgba(255, 255, 255, 0.82);
	border-top: solid 1px rgba(255, 255, 255, 0.08);
}

#footer > .inner {
	margin: 0 auto;
	max-width: 90em;
	position: relative;
	width: 90%;
}

/* ================================================= */
/* Footer Text                                       */
/* ================================================= */

#footer .copyright {
	color: #bbb;
	font-size: 0.9em;
}

#footer .menu {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9em;
	position: absolute;
	right: 0;
	top: 0;
}


/* ================================================= */
/* Footer Links */
/* ================================================= */


#footer .menu a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);

	/* NEW: langsamer & sanfter Übergang */
	transition:
		color 0.45s ease,
		border-color 0.45s ease;
}

/* Hover blendet ruhig ein */
#footer .menu a:hover {
	color: #f1b6d4; /* soft rosé-lila */
	border-bottom-color: rgba(241, 182, 212, 0.55);
}

/* ================================================= */
/* <b> im Footer */
/* ================================================= */

#footer b,
#footer strong {
	color: #a8959f; /* helles, ruhiges Lila */

	font-weight: 600;

}

#footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;

	transition:
		color 0.45s ease,
		border-color 0.45s ease;
}

/* Hover */
#footer a:hover {
	color: #f1b6d4;
}

		@media screen and (max-width: 1280px) {

			#footer {
				padding: 3em 0 1em 0 ;
				text-align: center;
			}

				#footer .copyright {
					margin: 0 0 1em 0;
				}

				#footer .menu {
					position: relative;
				}

		}

		@media screen and (max-width: 480px) {

			#footer .menu li a span {
				display: none;
			}

		}

/* ================================================= */
/* h3 / h4    */
/* ================================================= */

h3 {
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	font-size: 2.0em;

	line-height: 1.1em;

	text-transform: uppercase;
	margin: 0.35em 0 0.15em 0;

	/* Blau-Gradient bleibt */
	background: linear-gradient(
		90deg,
		#4f7fd1,
		#7a5fcf
	);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 900px) {

	h3 {
		font-size: 1.6em;
		line-height: 1.2;
                margin: 0.35em 0 0.05em 0;
	}
}

@media screen and (max-width: 600px) {

	h3 {
		font-size: 1.3em;
		line-height: 1.25;
                 margin: 0.35em 0 0.05em 0;
		word-break: break-word;
		hyphens: auto;
	}
}

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

	h3 {
		font-size: 1.85em; 
		line-height: 1.05;
                margin: 0.35em 0 0.05em 0;
		letter-spacing: 0.02em;
	}
}

h4 {
	font-family: "Raleway", sans-serif;
	font-weight: 600;

	/* größer & kompakter */
	font-size: 1.2em;
	line-height: 1.12em;
	margin: 0 0 0.22em 0;

	letter-spacing: 0.055em;
	text-transform: uppercase;

	/* dunkles rosa */
	background: linear-gradient(
		90deg,
		#b84a8f,
		#e28abb
	);

	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}



/* ================================================= */
/* CONTACT */
/* ================================================= */

/* Split-Hintergrund */
#contact.wrapper.split {
	background-color: #a7a2b0; 
	padding: 2.6em 0 1.8em 0;
}

/* Inneres Layout */
#contact.wrapper.split > .inner {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 1.6em;

	padding: 0 1.6em; 
	box-sizing: border-box;

	flex-wrap: nowrap;
}

/* Spalten: stabil und shrinkbar */
#contact.wrapper.split > .inner > section {
	flex: 1 1 0;
	min-width: 0;             /* verhindert Overflows */
	display: flex;            /* gleiche Höhe */
}

/* ================================================= */
/* WICHTIG
/* ================================================= */

#contact.wrapper.split > .inner > section {
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	backdrop-filter: none !important;
	padding: 0 !important;
	overflow: visible !important;
}

#contact.wrapper.split > .inner > section::before,
#contact.wrapper.split > .inner > section::after {
	content: none !important;
	display: none !important;
}

/* ================================================= */
/* FAVORITES – ohne Box, mittig                      */
/* ================================================= */

#contact .favorites {
	position: relative;

	background: transparent;
	box-shadow: none;
	border-radius: 0;
	backdrop-filter: none;

	padding: 0;
	overflow: visible;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	text-align: center;
}

/* no glow */
#contact .favorites::before {
	content: none;
	display: none;
}

/* ================================================= */
/* GIMMICK – OHNE Außenbox, INHALT mittig            */
/* ================================================= */

#contact .gimmick {
	position: relative;

	/* Außenbox weg */
	background: transparent;
	box-shadow: none;
	border-radius: 0;
	backdrop-filter: none;

	padding: 0;
	overflow: visible;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	text-align: center;  /* wie Favorites */
}

/* Glow im Gimmick no */
#contact .gimmick::before {
	content: none;
	display: none;
}

/* ================================================= */
/* Überschriften – größer                            */
/* ================================================= */

#contact h3,
#contact h4 {
	margin: 0 0 0.55em 0;
	padding-bottom: 0;
}

#contact h3:after,
#contact h4:after {
	display: none;
}

/* ================================================= */
/* h4 – Gradient
/* ================================================= */

#contact h4 {
	font-family: "Raleway", sans-serif;
	font-weight: 600;
	font-size: clamp(1.3em, 2.4vw, 1.6em);
	line-height: 1.45em;
	letter-spacing: 0.055em;
	text-transform: uppercase;

	/* Rosé-Grau deutlich wärmer + kräftiges Lila */
	background: linear-gradient(
		90deg,
		#b07a92,   /* rosigeres Grau */
		#a8959f,   /* warmes Rosé-Grau */
		#6a3f7c    /* kräftiges Lila */
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

	/* Kontur: rosé-grau statt neutral grau */
	filter:
		drop-shadow(1px 0 0 rgba(232, 220, 226, 0.85))
		drop-shadow(-1px 0 0 rgba(232, 220, 226, 0.85))
		drop-shadow(0 1px 0 rgba(232, 220, 226, 0.85))
		drop-shadow(0 -1px 0 rgba(232, 220, 226, 0.85))
		drop-shadow(0 0 6px rgba(176, 122, 146, 0.35))
		drop-shadow(0 0 8px rgba(106, 63, 124, 0.35));
}

#contact .mini-sub {
	margin: -0.25em 0 1.0em 0;
	font-size: 0.92em;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.55em;
}

/* ================================================= */
/* Favorite Links         */
/* Links Font-Size kleiner                           */
/* ================================================= */

#contact p.favorite-links {
	margin: 0.35em 0 0 0;
	padding: 0;

	line-height: 2.0em;
	color: rgba(255, 255, 255, 0.55);

	overflow-wrap: break-word; /* sauber umbrechen */
	word-break: normal;

	text-align: center;

	font-size: 0.88em;         /* <<< kleiner */
}

/* Links */
#contact .favorite-links a {
	position: relative;
	color: #a56299;
	font-weight: 700;
	text-decoration: none;
	padding: 0.06em 0.12em;
	border-radius: 6px;

	display: inline-block;
	max-width: 100%;

	transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease;
}

/* ================================================= */
/* animated underline   */
/* ================================================= */

#contact .favorite-links a::after {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -2px;
	height: 2px;
	border-radius: 99px;

	/* NEW: rosa -> lila, kein Peach/Orange */
	background: linear-gradient(
		90deg,
		rgba(181, 76, 134, 0.0),
		rgba(181, 76, 134, 0.90),
		rgba(122, 76, 166, 0.90),
		rgba(122, 76, 166, 0.0)
	);

	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.15s ease;
}

#contact .favorite-links a:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-1px);
	filter: drop-shadow(0 0 8px rgba(181, 76, 134, 0.28));
}

#contact .favorite-links a:hover::after {
	transform: scaleX(1);
}

/* ================================================= */
/* Quote – KEINE BOX, nur Symbol bleibt              */
/* Quote-Zeichen weiter unten, damit es nicht reinragt */
/* ================================================= */

#contact .quote-card {
	margin-top: 0.25em;
	padding: 0;
	border-radius: 0;

	background: none;
	border: 0;
	box-shadow: none;

	position: relative;
	overflow: visible;

	/* zentriert in der Spalte */
	margin-left: auto;
	margin-right: auto;
	max-width: 520px;

	text-align: center;
}

/* großes Anführungszeichen – weiter runter */
#contact .quote-card::before {
	content: "“";
	position: absolute;
	top: -0.15em;              /* <<< weiter unten */
	left: 50%;
	transform: translateX(-50%);
	font-size: 4.2em;
	line-height: 1;
	color: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

/* Quote-Text */
#contact .moon-quote {
	margin: 1.8em 0 0.55em 0;   /* Platz für das Symbol */
	font-size: 1.05em;
	letter-spacing: 0.02em;
	text-align: center;
	color: rgba(255, 255, 255, 0.90);
}

#contact .quote-card i,
#contact .quote-card em{
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ================================================= */
/* RESPONSIVE                     */
/* ================================================= */

/* Tablet/iPad: bleibt nebeneinander, nur kompakter */
@media screen and (max-width: 980px) {
	#contact.wrapper.split {
		padding: 2.3em 0 1.6em 0;
	}

	#contact.wrapper.split > .inner {
		padding: 0 1.25em;
		gap: 1.25em;
		flex-wrap: nowrap;
	}

	#contact h4 {
		font-size: clamp(1.25em, 2.6vw, 1.5em);
	}

	#contact .quote-card {
		max-width: 460px;
	}

	#contact p.favorite-links{
		font-size: 0.86em;       /* auf Tablet minimal kleiner */
	}
}

/* mobile */
@media screen and (max-width: 720px) {
	#contact.wrapper.split > .inner {
		display: block;
		padding: 0 1.2em;
	}

	#contact.wrapper.split > .inner > section {
		margin-bottom: 1.2em;
	}

	#contact .quote-card {
		max-width: 520px;
	}

	#contact p.favorite-links{
		font-size: 0.85em;       /* auf Mobile etwas kleiner */
		line-height: 1.9em;
	}
}

/* mobile */
@media screen and (max-width: 420px) {
	#contact.wrapper.split > .inner {
		padding: 0 1.05em;
	}

	#contact h4 {
		font-size: 1.22em;
	}

	#contact p.favorite-links{
		font-size: 0.84em;
		line-height: 1.85em;
	}

	/* Quote-Symbol ggf. noch minimal anpassen auf sehr klein */
	#contact .quote-card::before{
		top: -0.05em;
	}
}


/* 1) Grundfarbe für alle Links */
#main .inner a {
  color: #DE5C84;
  text-decoration: none;
  border: 0;
  transition:
    color 0.35s ease-in-out;
}

/* 2) Fancy Underline NUR für Textlinks
   (Links OHNE img, OHNE button) */
#main .inner .content a:not(.button):not(:has(img)) {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}

/* 3) Linie */
#main .inner .content a:not(.button):not(:has(img))::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;

  width: 100%;
  height: 2px;
  border-radius: 2px;

  background: linear-gradient(
    90deg,
    #DE5C84,
    #d84a90,
    #7a4dd8,
    #2f6fe3
  );

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

/* 4) Hover */
#main .inner .content a:not(.button):not(:has(img)):hover {
  color: #7a4dd8;
}

#main .inner .content a:not(.button):not(:has(img)):hover::after {
  transform: scaleX(1);
}

/* 5) Absolute Sicherheit für Bildlinks */
#main .inner a:has(img)::after {
  content: none !important;
}


/* Navigation Panel */

	#navPanel {
		-moz-transform: translateX(20em);
		-webkit-transform: translateX(20em);
		-ms-transform: translateX(20em);
		transform: translateX(20em);
		-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		background-color: #fff;
		box-shadow: none;
		display: none;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 20em;
		z-index: 10002;
		font-family: "Raleway", Helvetica, sans-serif;
		font-weight: 500;
		text-transform: uppercase;
	}

		#navPanel nav {
			padding: 3em 2em;
		}

		#navPanel .link {
			border: 0;
			border-top: solid 1px #e6e6e6;
			color: inherit !important;
			display: block;
			font-size: 0.9em;
			padding: 0.75em 0;
		}

			#navPanel .link:first-child {
				border-top: 0;
			}

			#navPanel .link.depth-0 {
				font-weight: 700;
				color: inherit !important;
			}

			#navPanel .link .indent-1 {
				display: inline-block;
				width: 1.25em;
			}

			#navPanel .link .indent-2 {
				display: inline-block;
				width: 2.5em;
			}

			#navPanel .link .indent-3 {
				display: inline-block;
				width: 3.75em;
			}

			#navPanel .link .indent-4 {
				display: inline-block;
				width: 5em;
			}

			#navPanel .link .indent-5 {
				display: inline-block;
				width: 6.25em;
			}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			border: 0;
			color: #444;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .close:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 900;
			}

			#navPanel .close:before {
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}

			@media screen and (max-width: 736px) {

				#navPanel .close {
					height: 4em;
					line-height: 4em;
				}

			}

		#navPanel.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.35);
			visibility: visible;
		}

		@media screen and (max-width: 980px) {

			#navPanel {
				display: block;
			}

		}

		@media screen and (max-width: 736px) {

			#navPanel {
				display: block;
			}

				#navPanel nav {
					padding: 2.25em 1.25em;
				}

		}

/* =========================================================
   Mobile Polish (modern typography)
   ========================================================= */

@media screen and (max-width: 736px) {

	/* Überschriften: moderne Größen + saubere Zeilenhöhe */
	h2 { font-size: 1.45em; line-height: 1.2;  letter-spacing: 0.02em; }
	h3 { font-size: 1.15em; line-height: 1.25; letter-spacing: 0.01em; }
	h4 { font-size: 1.0em;  line-height: 1.3;  letter-spacing: 0.01em; }

	/* heads */
	h2, h3, h4 {
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* Major Header  */
	header.major {
		margin-bottom: 1.25em;
	}

	header.major h2 {
		font-size: 1.65em; 
		line-height: 1.12;
		letter-spacing: 0.05em;
	}

	header.major p {
		font-size: 1.0em;
		line-height: 1.6;
		max-width: 34em;
	}

	/* Spotlight-Text */
	.spotlight .content h2 {
		font-size: 1.45em;
		line-height: 1.15;
		letter-spacing: 0.05em;
	}

	/* Posts */
	.posts .post h3 {
		font-size: 1.05em;
		line-height: 1.25;
		letter-spacing: 0.02em;
	}

	/* Buttons/Links */
	.button, button, input[type="submit"], input[type="button"] {
		font-size: 0.95em;
	}

	/* Banner Title: */
	#banner > article h2 .banner-title {
		font-size: 1.05em;
		letter-spacing: 0.08em;
	}


@media screen and (max-width: 736px) {

  /* Globaler Mobile-Text */
  body{
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: 0.015em;
  }

@media screen and (max-width: 736px) {

  .justify,
  *[style*="text-align:justify"]{
    text-align: justify;
    hyphens: auto;
    text-justify: inter-word;
  }

.justify{
  text-align-last: left;
  }
}

/* =========================================================
   Mobile: nicer text
   ========================================================= */
@media screen and (max-width: 736px) {

  /* Basis */
  #main .inner,
  #main .inner .content{
    font-size: 0.95em;
    line-height: 1.65;
    letter-spacing: 0.015em;
  }

  /* Fix */
  #main .inner .content{
    text-align: left !important;
    text-justify: auto;
  }

  /* trotzdem sauberes Umbruchsverhalten */
  #main .inner .content{
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    overflow-wrap: break-word;
    word-break: normal;
  }

  /* optional */
  #main .inner .content *[style*="text-align:justify"],
  #main .inner .content .justify{
    text-align: left !important;
  }
}

/* FIX: Header */
#header.alt {
  position: fixed !important;
  top: 0 !important;
  overflow: visible !important;
  box-shadow: 0 0 0.125em 0 rgba(0, 0, 0, 0.35) !important;

  background: linear-gradient(
    90deg,
    #e7e5f1 0%,
    #e5e3f0 60%,
    #e2e0f0 100%
  ) !important;
}