/* =========================================================
   CATALEYA MASSAGE – SEITEN

   1. Seitentitel-Bereich (Bild mit Titel)
   2. Seiteninhalt: Breiten und Textstile (Klasse "cataleya-page-content")
   2a. Gästebuch (Plugin „Gwolle Guestbook“): gleiche Breiten für den Shortcode
   2b. Startseite und Leistungsseiten: Kadence-Container "cataleya-section" (außen)
       und "cataleya-content" (innen)
   2c. Einheitliche Darstellung: Überschriften, Text, Buttons, Karten
   2d. Häufige Fragen (Seite „Unsere Massagen“)
   2e. Abgesetzte Felder (wie im Mitarbeiterbereich)
   3. Beiträge, Archive, Suche, 404, Kommentare
   4. Einblend-Animationen (data-appear-animation, assets/js/appear.js)

   Bildschirmbereiche:
     Desktop ab 1200 px · Tablet 768–1199 px · Handy 481–767 px · kleines Handy bis 480 px
   ========================================================= */


/* =========================================================
   1. SEITENTITEL-BEREICH
   template-parts/content-header.php: <section class="page-top"> mit dem Beitragsbild als
   Hintergrund und einem dunklen Schleier darüber, damit der weiße Titel auf jedem Foto lesbar ist.
   ========================================================= */

.page-top {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 300px;
	min-height: 300px;
	margin: 0;
	padding: 0;
	border-top: 5px solid #384045;
	border-bottom: 5px solid #ccc;
	background-color: #171717;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: left;
}

/* Auf allen Seiten außer WooCommerce: Rand in der Markenfarbe */
.cataleya-brand .page-top {
	border-bottom-color: var(--primary);
}

/* Dunkler Schleier; ragt 20 px über den Bereich hinaus */
.page-top::before {
	content: "";
	position: absolute;
	top: -20px;
	left: 0;
	z-index: 1;
	width: 100%;
	height: calc(100% + 20px);
	margin: 0;
	padding: 0;
	background: rgba(23, 12, 34, 0.48);
	pointer-events: none;
}

.page-top .container {
	position: relative;
	z-index: 2;
	height: 100%;
}

.page-top .row {
	height: 100%;
}

.page-top .col-md-12 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.page-top h1 {
	position: relative;
	display: inline-block;
	min-height: 37px;
	margin: 0 0 -25px;
	padding: 0 0 17px;
	border-bottom: 5px solid var(--primary);
	color: #fff;
	font-size: 2.6em;
	font-weight: 300;
	line-height: 46px;
	text-align: center;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

@media (max-width: 479px) {

	.page-top {
		padding: 16px 0;
	}

	.page-top h1 {
		line-height: 37px;
	}
}


/* =========================================================
   2. SEITENINHALT
   .cataleya-page-wrapper    <article> um den Seiteninhalt (page.php)
   .cataleya-page-section    äußerer Kadence-Container (volle Breite)
   .cataleya-page-content    innerer Kadence-Container: Breite 70 % / 90 % / 100 %
   ========================================================= */

/* Seitenbreiten – HIER einstellen (gilt für .cataleya-page-content und das Gästebuch, Abschnitt 2a):
   Desktop ab 1200 px · Tablet 768–1199 px · Handy: volle Breite mit Seitenrand (siehe unten). */
:root {
	--cataleya-page-width-desktop: 70%;
	--cataleya-page-max-width-desktop: 1200px;
	--cataleya-page-width-tablet: 90%;
}

.cataleya-page-wrapper {
	width: 100%;
}

.cataleya-page-section {
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

.cataleya-page-content {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding: 20px 12px;
}

@media (min-width: 481px) and (max-width: 767px) {

	.cataleya-page-content {
		padding: 25px 15px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {

	.cataleya-page-content {
		width: var(--cataleya-page-width-tablet);
		max-width: 100%;
		padding: 35px 0;
	}
}

@media (min-width: 1200px) {

	.cataleya-page-content {
		width: var(--cataleya-page-width-desktop);
		max-width: var(--cataleya-page-max-width-desktop);
		padding: 40px 0;
	}
}


/* =========================================================
   2a. GÄSTEBUCH (Plugin „Gwolle Guestbook“, Shortcodes [gwolle_gb], [gwolle_gb_write], [gwolle_gb_read])

   Das Gästebuch-Plugin begrenzt seine Breite nicht selbst. Steht der Shortcode direkt im Seiteninhalt
   (nicht in einem Kadence-Container mit der Klasse "cataleya-page-content"), füllte er die ganze Seite.
   Deshalb erhalten auf einer solchen Seite alle direkten Elemente des Seiteninhalts dieselben
   Breiten wie .cataleya-page-content (Variablen oben in Abschnitt 2). Ein Element, das die Klasse
   schon trägt (z. B. die Überschrift darüber), bekommt dieselben Werte noch einmal – es wird also
   nicht doppelt verkleinert. Liegt der Shortcode in einem Container mit der Klasse, greift dieser
   Abschnitt nicht (kein direktes Element).
   ========================================================= */

.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) > * {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
}

.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) {
	padding-bottom: 20px;
}

@media (max-width: 480px) {

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) > * {
		padding-right: 12px;
		padding-left: 12px;
	}
}

@media (min-width: 481px) and (max-width: 767px) {

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) > * {
		padding-right: 15px;
		padding-left: 15px;
	}

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) {
		padding-bottom: 25px;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) > * {
		width: var(--cataleya-page-width-tablet);
		max-width: 100%;
	}

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) {
		padding-bottom: 35px;
	}
}

@media (min-width: 1200px) {

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) > * {
		width: var(--cataleya-page-width-desktop);
		max-width: var(--cataleya-page-max-width-desktop);
	}

	.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) {
		padding-bottom: 40px;
	}
}

/* Textstile im Seiteninhalt */

.cataleya-page-content p {
	margin-top: 0;
	margin-bottom: 15px;
	color: #333;
	line-height: 1.6;
}

.cataleya-page-content h1,
.cataleya-page-content h2,
.cataleya-page-content h3,
.cataleya-page-content h4,
.cataleya-page-content h5,
.cataleya-page-content h6 {
	margin-top: 0;
	margin-bottom: 20px;
}

.cataleya-page-content a {
	text-decoration: none;
}

.cataleya-page-content img {
	max-width: 100%;
	height: auto;
}

.cataleya-page-content ul,
.cataleya-page-content ol {
	margin-top: 0;
	margin-bottom: 20px;
}

.cataleya-page-content li {
	line-height: 1.6;
}

.cataleya-page-content table {
	width: 100%;
	border-collapse: collapse;
}

.cataleya-page-content th {
	padding: 15px;
	text-align: center;
}

.cataleya-page-content td {
	padding: 10px;
}

.cataleya-page-content blockquote {
	margin: 20px 0;
	padding-left: 15px;
	border-left: 5px solid var(--primary);
}

.cataleya-page-content blockquote p {
	color: #333;
}

/* Button für Seiteninhalte: <a class="cataleya-button"> (auch innerhalb von .cataleya-cta) */
.cataleya-page-content a.cataleya-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 12px 24px;
	border: 2px solid var(--primary);
	border-radius: 6px;
	background-color: var(--primary);
	color: #fff !important;
	text-decoration: none;
}


/* =========================================================
   2b. STARTSEITE UND LEISTUNGSSEITEN: ÄUSSERER UND INNERER KADENCE-CONTAINER

   Diese beiden Klassen stehen in den Kadence-Zeilen der Startseite und der Seite
   „Thai-Massage“ (Kadence: Zeile → Erweitert → Zusätzliche CSS-Klasse):

   .cataleya-section   äußerer Container: volle Breite (Hintergrundfarbe oder -bild
                       wird in Kadence eingestellt)
   .cataleya-content   innerer Container: Desktop 70 %, Tablet 90 %, Handy 100 %

   Die Werte sind dieselben wie im früheren Theme (frontpage.css). Die Prozentwerte
   kommen aus den Variablen oben in Abschnitt 2. Eine Obergrenze (max-width) gibt es
   hier – anders als bei .cataleya-page-content – nicht.
   ========================================================= */

.cataleya-section {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-right: 0;
	margin-left: 0;
}

.cataleya-content {
	box-sizing: border-box;
	width: var(--cataleya-page-width-desktop);
	max-width: none;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) and (max-width: 1199px) {

	.cataleya-content {
		width: var(--cataleya-page-width-tablet);
	}
}

@media (max-width: 767px) {

	.cataleya-content {
		width: 100%;
	}
}


/* =========================================================
   2c. EINHEITLICHE DARSTELLUNG
   Alte Seiten tragen eigene Größen und Farben direkt an den Blöcken. Diese Regeln gelten
   deshalb mit !important und sorgen dafür, dass alle Seiten gleich aussehen. Neue Blöcke
   brauchen keine eigene Größe und Farbe. Werte ändern: nur hier in den Variablen.
   ========================================================= */

:root {
	--cataleya-heading: #331349;
	--cataleya-text: #2b2b2b;
	--cataleya-h2-size: 26px;
	--cataleya-h3-size: 20px;
	--cataleya-radius: 13px;
	--cataleya-soft-bg: #fbf3f8;
}

.cataleya-page-content h2,
.cataleya-content h2 {
	margin-bottom: 16px;
	color: var(--cataleya-heading) !important;
	font-size: var(--cataleya-h2-size) !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 1.3 !important;
}

.cataleya-page-content h3,
.cataleya-content h3 {
	margin-bottom: 12px;
	color: var(--cataleya-heading) !important;
	font-size: var(--cataleya-h3-size) !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	text-transform: none;
}

.cataleya-page-content h2 a,
.cataleya-page-content h3 a,
.cataleya-content h2 a,
.cataleya-content h3 a {
	color: inherit !important;
}

.cataleya-page-content p,
.cataleya-page-content li,
.cataleya-content p,
.cataleya-content li {
	font-size: 16px;
	line-height: 1.7;
}

.cataleya-page-content [style*="#8d969e"],
.cataleya-page-content [style*="#757c83"],
.cataleya-page-content [style*="#555555"],
.cataleya-page-content [style*="#777777"],
.cataleya-page-content .has-cyan-bluish-gray-color,
.cataleya-content [style*="#8d969e"],
.cataleya-content [style*="#757c83"],
.cataleya-content [style*="#555555"],
.cataleya-content [style*="#777777"],
.cataleya-content .has-cyan-bluish-gray-color {
	color: var(--cataleya-text) !important;
}

/* Früherer zweiter Rosa-Ton in Kleinüberschriften */
.cataleya-content [style*="#d81b60" i] {
	color: var(--cataleya-brand) !important;
}

/* Alle Buttons im Seiteninhalt: gleiche Größe, Form und Schreibweise */
.wp-block-button__link.has-vivid-red-background-color {
	padding: 12px 28px;
	border-radius: var(--cataleya-radius) !important;
	font-size: 16px !important;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* Team-Karten und Auswahlkarten */
.cataleya-team-card,
.cataleya-auswahl-card {
	border-radius: var(--cataleya-radius);
	background: #fff;
	text-align: center;
}

.cataleya-team-card img {
	border-radius: var(--cataleya-radius);
}

.cataleya-team-card p {
	margin-bottom: 0;
}


/* =========================================================
   2d. HÄUFIGE FRAGEN
   Klappbare Fragen (Block „Details“) in zwei Spalten auf heller Fläche.
   ========================================================= */

.cataleya-faq-section {
	padding-top: 48px;
	padding-bottom: 48px;
	background-color: var(--cataleya-soft-bg) !important;
}

.cataleya-faq-section h2,
.cataleya-faq-section .cataleya-faq-intro {
	text-align: center;
}

.cataleya-faq-section .cataleya-faq-intro {
	margin-bottom: 28px;
}

.cataleya-faq-list > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.cataleya-faq-list > .wp-block-group__inner-container > * {
	margin: 0 !important;
}

.cataleya-faq-item {
	border: 1px solid rgba(var(--cataleya-brand-rgb), 0.18);
	border-left: 4px solid var(--cataleya-brand);
	border-radius: var(--cataleya-radius);
	background: #fff;
	box-shadow: 0 4px 14px rgba(51, 19, 73, 0.07);
}

.cataleya-faq-item summary {
	position: relative;
	padding: 16px 48px 16px 20px;
	color: var(--cataleya-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.cataleya-faq-item summary::-webkit-details-marker {
	display: none;
}

.cataleya-faq-item summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 18px;
	color: var(--cataleya-brand);
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	transform: translateY(-50%);
}

.cataleya-faq-item[open] summary::after {
	content: "\2212";
}

.cataleya-faq-item > :not(summary) {
	margin: 0;
	padding: 0 20px 18px;
}

@media (max-width: 767px) {

	.cataleya-faq-section {
		padding-right: 15px;
		padding-left: 15px;
	}

	.cataleya-faq-list > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   2e. ABGESETZTE FELDER
   Gleiche Felder wie im Mitarbeiterbereich: weiße Fläche, feiner Rand, runde Ecken, leichter Schatten.
   Jeder innere Container (.cataleya-content, .cataleya-page-content) ist ein Feld. Enthält er
   selbst mehrere Karten, bleibt er unsichtbar und jede Karte ist ein eigenes Feld.
   ========================================================= */

:root {
	--cataleya-field-border: #e7e7e7;
	--cataleya-field-shadow: 0 2px 10px rgba(0, 0, 0, 0.045);
	--cataleya-field-padding: 28px 32px;
}

.cataleya-section:not(:has(+ .cataleya-section .cataleya-benefits-cards)) .cataleya-content:not(:has(.cataleya-benefits-cards, .cataleya-testimonial-cards, .cataleya-faq-list)),
.cataleya-page-content:not(:has(.cataleya-team-card, .cataleya-auswahl-card, .gwolle-gb)),
.cataleya-benefits-cards > .kt-row-column-wrap > .wp-block-kadence-column,
.cataleya-testimonial-cards > .kt-row-column-wrap > .wp-block-kadence-column,
.cataleya-team-card,
.cataleya-auswahl-card,
.gwolle-gb-write,
.gwolle-gb-read .gb-entry,
.woocommerce ul.products li.product,
.woocommerce.single-product div.product,
.woocommerce-cart-form,
.woocommerce .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.woocommerce form.login,
.woocommerce form.register {
	box-sizing: border-box;
	border: 1px solid var(--cataleya-field-border);
	border-radius: var(--cataleya-radius);
	background-color: #fff;
	box-shadow: var(--cataleya-field-shadow);
}

.cataleya-page-content:not(:has(.cataleya-team-card, .cataleya-auswahl-card, .gwolle-gb)),
.gwolle-gb-write,
.gwolle-gb-read .gb-entry,
.woocommerce.single-product div.product,
.woocommerce-cart-form,
.woocommerce .cart_totals,
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	padding: var(--cataleya-field-padding);
}

/* Terminaufruf: Die Spalte trägt in Kadence einen eigenen Rahmen, das Feld darum genügt */
.cataleya-booking-cta-inner > .kt-inside-inner-col {
	border: 0 !important;
	box-shadow: none !important;
}

/* Produktseite: Das Feld umschließt Bild und Text. WooCommerce-Buttons in der Markenfarbe statt Lila */
.woocommerce.single-product div.product {
	display: flow-root;
}

body .woocommerce a.button.alt,
body .woocommerce button.button.alt {
	background-color: var(--cataleya-brand);
	color: #fff;
}

/* Gutschein-Kacheln: gleich hoch, Bild bis zum Rand, Text mit Abstand */
.woocommerce ul.products {
	display: flex;
	flex-wrap: wrap;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

.woocommerce ul.products li.product {
	overflow: hidden;
	padding-bottom: 14px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
	padding-right: 12px;
	padding-left: 12px;
}

/* Gästebuch: Überschrift so breit wie die Einträge, jeder Eintrag ein eigenes Feld */
.cataleya-page-wrapper:has(> [class*="gwolle-gb"]) .cataleya-page-content {
	width: 100%;
	max-width: none;
}

.gwolle-gb-read .gb-entry {
	margin-bottom: 12px !important;
	padding: 14px 20px !important;
}

.cataleya-page-section,
.cataleya-section {
	padding-top: 10px;
	padding-bottom: 10px;
}

.cataleya-page-section .cataleya-page-content,
.cataleya-section .kt-inside-inner-col > .cataleya-content.aligncenter {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* Einzelne Altzeilen tragen „volle Breite“ am Block und würden sonst bis zum Rand laufen */
.cataleya-section .kt-inside-inner-col > .cataleya-content.aligncenter {
	width: var(--cataleya-page-width-desktop);
	max-width: none;
	margin-right: auto;
	margin-left: auto;
}

@media (min-width: 768px) and (max-width: 1199px) {

	.cataleya-section .kt-inside-inner-col > .cataleya-content.aligncenter {
		width: var(--cataleya-page-width-tablet);
	}
}

@media (max-width: 767px) {

	:root {
		--cataleya-field-padding: 20px 16px;
	}

	.woocommerce ul.products {
		justify-content: space-between;
	}

	.cataleya-content,
	.cataleya-section .kt-inside-inner-col > .cataleya-content.aligncenter,
	.cataleya-page-content {
		width: calc(100% - 24px);
	}
}


/* =========================================================
   3. BEITRÄGE, ARCHIVE, SUCHE, 404, KOMMENTARE
   (auf der Live-Seite derzeit kaum genutzt – einfach gehalten)
   ========================================================= */

.cataleya-post,
.cataleya-archive,
.cataleya-404 {
	padding: 40px 0;
}

.cataleya-post-meta {
	margin-bottom: 15px;
	color: #777;
	font-size: 13px;
}

.cataleya-post-meta .separator {
	margin: 0 4px;
}

.cataleya-archive-header {
	margin-bottom: 30px;
}

.cataleya-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 30px;
	margin-bottom: 30px;
}

.cataleya-card {
	overflow: hidden;
	background: #f7f7f7;
	box-shadow: 0 0 9px -5px rgba(0, 0, 0, 0.8);
}

.cataleya-card-image img {
	display: block;
	width: 100%;
	height: auto;
}

.cataleya-card-body {
	padding: 15px;
}

.cataleya-card-title {
	margin: 0 0 8px;
	font-size: 1.3em;
	line-height: 1.3;
}

/* Suchformular (WordPress-Standard-Markup) */
.search-form {
	display: flex;
	max-width: 480px;
}

.search-form label {
	flex: 1;
	margin: 0;
}

.search-field {
	width: 100%;
}

.search-submit {
	padding: 10px 20px;
	border: 0;
	background-color: var(--accent);
	color: #fff;
	font-weight: 600;
}

/* Kommentare */
.cataleya-comments {
	margin-top: 40px;
}

.cataleya-comments .comment-list {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.cataleya-comments .comment-list .children {
	list-style: none;
}

.cataleya-comments .comment-body {
	margin-top: 10px;
	padding-left: 65px;
}

.cataleya-comments .comment-body .avatar {
	float: left;
	margin-left: -65px;
	border-radius: 100%;
}


/* =========================================================
   4. EINBLEND-ANIMATIONEN
   Elemente mit data-appear-animation="NAME" werden eingeblendet, sobald sie sichtbar
   werden (assets/js/appear.js). Verfügbare Namen siehe @keyframes unten.
   ========================================================= */

.appear-animation {
	opacity: 0;
	animation-duration: 1s;
	animation-fill-mode: both;
}

.appear-animation-visible {
	opacity: 1;
}

/* Klasse = Animationsname (appear.js fügt sie hinzu, sobald das Element sichtbar wird). */
.fadeIn { animation-name: fadeIn; }
.fadeInUp { animation-name: fadeInUp; }
.fadeInDown { animation-name: fadeInDown; }
.fadeInLeft { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }
.fadeInUpBig { animation-name: fadeInUpBig; }
.fadeInDownBig { animation-name: fadeInDownBig; }
.fadeInLeftBig { animation-name: fadeInLeftBig; }
.fadeInRightBig { animation-name: fadeInRightBig; }
.bounceIn { animation-name: bounceIn; }
.bounceInUp { animation-name: bounceInUp; }
.bounceInDown { animation-name: bounceInDown; }
.bounceInLeft { animation-name: bounceInLeft; }
.bounceInRight { animation-name: bounceInRight; }
.rotateIn { animation-name: rotateIn; }
.rotateInUpLeft { animation-name: rotateInUpLeft; }
.rotateInDownLeft { animation-name: rotateInDownLeft; }
.rotateInUpRight { animation-name: rotateInUpRight; }
.rotateInDownRight { animation-name: rotateInDownRight; }

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } }
@keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }
@keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }
@keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }
@keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }

/* Wer Bewegung am Gerät abgeschaltet hat, bekommt die Elemente ohne Animation. */
@media (prefers-reduced-motion: reduce) {

	.appear-animation {
		animation: none !important;
		opacity: 1;
	}
}