/*
Theme Name: AmoreXperience
Theme URI: https://amore-experience-sg.ch/
Author: DManuel Grasse
Description: Onepage-Layout für AmoreXperience
Version: 1.0
Text Domain: amorexperience
*/


  /* inter-100 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100;
	src: url('font/inter-v20-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-100italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 100;
	src: url('font/inter-v20-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-200 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	src: url('font/inter-v20-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-200italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 200;
	src: url('font/inter-v20-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-300 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('font/inter-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-300italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 300;
	src: url('font/inter-v20-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-regular - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('font/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	src: url('font/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-500 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('font/inter-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-500italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 500;
	src: url('font/inter-v20-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-600 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('font/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-600italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 600;
	src: url('font/inter-v20-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-700 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('font/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-700italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 700;
	src: url('font/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-800 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url('font/inter-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-800italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 800;
	src: url('font/inter-v20-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-900 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url('font/inter-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* inter-900italic - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: italic;
	font-weight: 900;
	src: url('font/inter-v20-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }html {
	font-size: 62.5%; /* 1rem = 10px */
  }
	:root {
	  --red: #E94B4A;
	  --pink: #FDF0F0;
	  --navy: #242843;
	  --text: #242843;
	  --muted: #777777;
	  --border: #dddddd;
	}

	* {
	  box-sizing: border-box;
	}

	body {
	  margin: 0;
	  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	  color: var(--text);
	  background: #ffffff;
		/* Smooth Font Rendering */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		  font-size: 2.2rem; /* = 16px Standardgröße */
	}

	img {
	  max-width: 100%;
	  display: block;
	}

	h1, h2, h3, h4 {
	  margin: 0 0 .75rem;
	  font-weight: 700;
	  letter-spacing: 0.01em;
	}

	p {
	  margin: 0 0 .75rem;
	  line-height: 1.5;
	}

	a {
	  color: var(--red);
	  text-decoration: none;
	}

	a:hover {
	  text-decoration: underline;
	}

	.wrapper {
	}

	/* ---------- Sektion 1: Hero & Einleitung (mit schrägem rosa Bereich) ---------- */

	.hero-section {
	  padding: 3rem 0 0;
	  position: relative;
	  overflow: hidden;
	}

	.hero-banner {
	  max-width: 1390px;
	  margin: 0  auto;
	}
	.hero-banner img.mobile{
		display: none;
	}

	.hero-banner img {
	  width: 100%;
	  height: auto;
	  display: block
	}

	.hero-angled {
	  position: relative;
	  padding-top: 30rem;
	  margin-top: -20rem;
	  padding-bottom: 10rem;
	}

	.hero-angled::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: var(--pink);
	  transform-origin: top left;
	  transform: skewY(-3deg);
	  z-index: -1;
	}
.row{
		max-width: 700px;
		margin: 0 auto;
	}
	.row-lg{
		margin: 0 auto;
		max-width: 1000px;
	}
	.hero-angled-inner {
	  padding: 3rem 0 5rem;
	}

	.hero-text p {
	  margin-bottom: 3rem;
	}
.hero-text h2{
	
	font-size: 4.4rem;
}

.hero-text h2 img{
	display: block;
	margin-bottom: 10px;
}

.hero-text h2 span{
	font-size: 6rem;
	color: var(--red)
}

.hero-text h3{
	font-weight: normal;
	font-size: 4.4rem;
	margin-bottom: 4rem;
	margin-top: 4rem;
}
	.hero-meta {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 2rem;
	  margin-top: 8rem;
	  padding-bottom: 12rem;
	}

	.hero-meta h3 {
	  margin-bottom: 2rem;
	  font-size: 6rem;
	  color: var(--red)
	}
	.hero-meta > div > div{
		margin-bottom: 4rem;
	}

	/* ---------- Sektion 2: Video-Bereich (rote Schräge) ---------- */

	.video-section {
	  position: relative;
	}

	.video-section::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: var(--red);
	  transform-origin: top left;
	  transform: skewY(-3deg);
	  z-index: -1;
	}

	.video-inner {
	  padding: 5rem 0 5rem;
	}

	.video-card {
	  max-width: 700px;
	  margin: 0 auto;
	  position: relative;
	}

	.video-card iframe {
	  width: 100%;
	  height: auto;
	  margin-bottom: 10rem;
	  display: block;aspect-ratio: 16 / 9; /* default, passt sich aber an YouTube automatisch an */
		
	}
	.video-card video {
	  width: 100%;
	  height: auto;
	  margin-bottom: 10rem;
	  display: block;
		
	}

	.video-link {
	  text-align: right;
	  color: #ffffff;
	  font-size: 0.85rem;
	  margin-top: 1.25rem;
	}

	/* ---------- Sektion 3: Kernteam (dunkelblaue Schräge) ---------- */

	.team-section {
	  position: relative;
	  color: #ffffff;
	}

	.team-section::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: var(--navy);
	  transform-origin: top left;
	  transform: skewY(-3deg);
	  z-index: -1;
	}

	.team-inner {
	  padding: 4.5rem 0 14rem;
	}

	.team-title {
	  text-align: left;
	  max-width: 700px;
	  margin: 0 auto 9rem auto;
	  font-size: 6rem;
	}

	.team-grid {
	  display: grid;
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  gap: 2rem;
	  text-align: center;
	}

	.team-member img {
	  width: 260px;
	  height: 260px;
	  border-radius: 50%;
	  object-fit: cover;
	  margin: 0 auto 4rem;
	  background: #f5f5f5;
	}

	.team-name {
	  font-weight: 500;
	  font-size: 2.2rem;
	  margin-bottom: 0.15rem;
	}

	.team-role {
	  font-size: 2rem;
	  color: rgba(255,255,255,1);
	}

	.team-contact {
	  text-align: center;
	  margin-top: 6rem;
	}
.team-contact a{
	color: #fff;
	font-size: 1.8rem;
	border-bottom: 1px solid #fff;
}
	/* ---------- Sektion 4: Anmeldung (Form) ---------- */

	.form-section {
	  padding: 4rem 0 5rem;
	}

	.form-title {
	  color: var(--red);
	  font-size: 2rem;
	  margin-bottom: 2rem;
	}

	.form-intro {
	  font-size: 1.8rem;
	  margin-bottom: 2rem;
	}

	form {
	  font-size: 1.8rem;
	}

	.form-grid {
	  display: grid;
	  grid-template-columns: repeat(2, minmax(0, 1fr));
	  gap: 1.25rem 2rem;
	  margin-bottom: 3rem;
	}

	label {
	  display: block;
	  margin-bottom: .75rem;
	  font-size: 1.6rem;
	}

	input[type="text"],
	input[type="email"],
	textarea {
	  width: 100%;
	  border: 1px solid var(--border);
	  padding: 1rem 2rem;
	  border-radius: 0;
	  font-family: inherit;
		font-size: 1.8rem;
	}

	textarea {
	  min-height: 120px;
	  resize: vertical;
	}

	.form-note-section {
	  margin-top: 3rem;
	  font-size: 1.8rem;
	}

	.form-note-section h4, .form-remarks label {
		font-size: 1.8rem;
	  color: var(--red); text-transform: uppercase; font-weight: 600; letter-spacing: 0.04rem;
	}

	.form-note-layout {
	  display: grid;
	  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	  gap: 2rem;
	  margin-top: 1rem;
	  align-items: flex-start;
	}
	
	.spacer{
		border-top: 1px solid #222;
		margin: 4rem 0;
	}

	.qr-placeholder {
	  width: 160px;
	  height: 160px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 1.8rem;
	  text-transform: uppercase;
	  letter-spacing: 0.08em;
	}

	.form-remarks {
	  margin-top: 2.5rem;
	}

	.submit-area {
	  margin-top: 1.75rem;
	}
.remark-text{
	margin-top: 2rem;
	margin-bottom: 3rem;
	font-size: 1.6rem;
}
	.btn-submit {
	  border: none;
	  background: var(--red);
	  color: #ffffff;
	  font-size: 1.8rem;
	  padding: 1rem 2rem;
	  cursor: pointer;
	  border-radius: 999px;
	}

	.btn-submit:hover {
	  opacity: 0.9;
	}

	/* ---------- Sektion 5: Footer mit Schräge ---------- */

	.footer-section {
	  position: relative;
	  color: #ffffff;
	  margin-top: 60px;
	}

	.footer-angled {
	  position: relative;
	  background: var(--navy);
	}

	.footer-angled::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  background: var(--navy);
	  transform-origin: top left;
	  transform: skewY(-3deg);
	  z-index: -1;
	}

	.footer-inner {
	  padding: 3.5rem 0 9rem;
	}

	.footer-top-icon {
	  text-align: left;
	  font-size: 1.8rem;
	  margin-bottom: 1.5rem;
	  position: absolute;
	  top: -138px;
	  left: 20%
	  
	  
	}
	
	.footer-top-icon svg{
		width: 80px;
		height:80px;
	}

	.footer-bottom {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  font-size: 1.8rem;
	  gap: 1rem;
	}

	.footer-logo svg{
		
		width: 80%;
		height: auto;
	}

	@media (max-width: 768px) {
	  .hero-meta {
		grid-template-columns: 1fr;
	  }

	  .team-grid {
		grid-template-columns: 1fr;
		gap: 4rem;
	  }

	  .form-grid {
		grid-template-columns: 1fr;
	  }

	  .form-note-layout {
		grid-template-columns: 1fr;
	  }

	  .footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	  }
	  
	   .hero-text h2, .hero-text h3 {
			font-size: 3rem;
		} 
	
	}
	
	@media(max-width: 600px){
		.row, .row-lg, .team-inner{
			width: 90%;
			margin: 0 auto;
		}
		.hero-meta h3 img,
		.team-title img,
		.form-title img,
		.hero-text h2 img{
			height: 50px;
			width: auto;
			display: block
		}
		.hero-section{
			padding-top: 0;
		}.hero-angled{
			padding-top: 24rem;
		}
		.hero-banner img.mobile{
			display: block;
		}
		
		.hero-banner img.desktop{
			display: none;
		}
		body, .team-name, .team-role{
			font-size: 1.8rem;
		}
	.footer-bottom{
		gap: 4rem;
	}
		.form-intro{
			font-size: 1.6rem;
		}.footer-top-icon {
			left: auto;
			right: 6%;
		}
	}