@font-face {
  font-family: "JoanneMarieScript";
  src: url("JoanneMarieScript.woff2");
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-display: swap;
  src: url(Cormorant-Garamond.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  margin-top: 20px;
  background-color: #f2f2f2;
  text-align: center;
}

.align-left {
	text-align: left;
}
.align-justify {
	text-align: justify;
}
/* ===== Header ===== */

header {
  margin-top : 10px;
  padding: 10px 0px 0px 0px;  /* deutlich kompakter */
}

header h1 {
  font-family: 'Cormorant Garamond', serif;
  display: block;
  justify-content: center;
  text-align : center;
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 44px);
  margin: 0 0 10px 0;
  text-wrap: balance;

}

h2 {
	margin: 2rem 0 0 0;
  	font-size: clamp(25px, 3.2vw, 38px);
  }

h3 {
	margin: 2rem 0 0 0;
	font-size: 1.4rem;
}

/* ===== Navigation ===== */

nav {
  font-family: 'Cormorant Garamond', serif;
  display: flex;
  justify-content: center;
  gap: 35px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

nav a {
  text-decoration: none;
  color: #111;
  font-size: 1.3rem;
}

@media (max-width: 600px) {

  header {
    padding: 30px 10px 10px 30px;  /* deutlich kompakter */
  }

  nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    justify-items: center;
  }

  nav a {
    font-size: 17px;
  }
}

/* ====== Layout ====== */

.wrapper {
    height: 100vh;
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: top;
    gap: 0px;
    padding: 0px 80px;
}

.section {
	max-width: 760px;
	margin: 60px auto;
	padding: 0;

}
/* ===== Bilder ===== */

.main-image img @media (min-width: 600px) {
  margin-top:48px;
  max-height: 48vh;
  /*width: auto;*/
  max-width: 48vw;
  /*height: auto;*/
}

img.w-90 {
  width: 90%;
}

 @media (min-width: 800px) {
	 img.w-l-45 {
		 width: 45%;
	 }
 }

img.w-100 {
  width: 100%;
}

/* ===== Subtitle ===== */

.subtitle {
  font-family: 'JoanneMarieScript', cursive;
  font-size: clamp(16px, 2.5vw, 28px);
  word-spacing: 4px;

  margin: 0px auto 40px auto;
  padding: 0 2px;
  white-space: preserve-breaks;
}

/* ===== Mobile ===== */

@media (max-width: 600px) {

  header {
    padding: 30px 10px 10px 30px;
  }

  nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    justify-items: center;
  }

  nav a {
    font-size: 17px;
  }

  .main-image img {
    max-height: 100%;
    width: 95vw;
  }
}

@media (min-width: 900px) {
	.flex-row-large {
		display: flex;
		flex-direction: row;
	}


	.space-inbetween {
		align-items: center;
		justify-content: space-between;
	}
}



/* ====== Linke Seite ====== */

.left {
    margin-top:100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: top;
}

.portrait {
    width: 50%;
    max-height: 50vh;
    object-fit: contain;         
}

/* ====== Rechte Seite ====== */

.right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
    line-height: 1.6;
    font-size: 1.5rem;
    display: block;
    text-align: justify;
}


.logo2{
    align-self:left;
}

.logo2 img {
    width: 500px;
    height: auto;
}

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

    .wrapper {
        display: block;
        padding: 0 20px;
        margin-top: 10px;
        height: auto;
    }

    .left {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .portrait {
        width: 180px;
        max-width: 60%;
    }

    .right {
        margin-top: 20px;

				h2 {
								text-align: center;
				}
    }

    h2 {
        font-size: 2rem;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .text p {
        max-width: 100%;
        text-align: justify;
    }

}