/* tilt-warp-latin-wght-normal */
@font-face {
  font-family: 'Tilt Warp Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(''),
   url('../fonts/tilt-warp-latin-400-normal.woff2') format('woff2'), /* Super Modern Browsers */
   url('../fonts/tilt-warp-latin-400-normal.woff') format('woff'); /* Modern Browsers */
  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;
}

/* courier-prime-latin-400-normal */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: local(''),
   url('../fonts/courier-prime-latin-400-normal.woff2') format('woff2'), /* Super Modern Browsers */
   url('../fonts/courier-prime-latin-400-normal.woff') format('woff'); /* Modern Browsers */
  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;
}

/* courier-prime-latin-700-normal */
@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(''),
   url('../fonts/courier-prime-latin-700-normal.woff2') format('woff2'), /* Super Modern Browsers */
   url('../fonts/courier-prime-latin-700-normal.woff') format('woff'); /* Modern Browsers */
  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;
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  width: 100vw;
  height: 100vh;
  padding: 72px 48px 48px 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url('../img/seeblick_lassahn_2025_02©OlafTammFOTO.jpg');
  background-size: cover;         /* Ensures the image always covers the entire background */
  background-position: center;    /* Centers the image */
  background-repeat: no-repeat;   /* Prevents the image from repeating */
  background-attachment: fixed;   /* Optional: makes the background stay fixed on scroll */
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex: 1 0 0;
  align-self: stretch;
}

.content-frame-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 464px;
  align-self: stretch;
}

.content-frame-2 {
  display: flex;
  padding: 20px;
  align-items: flex-start;
  gap: 72px;
  border-radius: 8px;
  background: var(--classic-rose, #F9D2E5);
}

.content-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.content-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.content-text {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.text-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.text-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.content-right {
  display: flex;
  max-width: 480px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.content-contact {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}


#logo-frame {  
  display: flex;
  max-width: 52vh;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
}

/* .logo-frame svg {
  fill: var(--deep-carrot-orange, #ED6E29);
} */

h1 {
  color: var(--governor-bay, #504A9A);
  font-family: 'Tilt Warp Variable', sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 35.2px */
  margin: 0;
  padding: 0;
}

h2 {
  color: var(--governor-bay, #504A9A);
  font-family: 'Tilt Warp Variable', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 17.6px */
  margin: 0;
  padding: 0;
}

h3 {
  color: var(--governor-bay, #504A9A);
  font-family: 'Tilt Warp Variable', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 22px */
  margin: 0;
  padding: 0;
}

p {
  color: var(--governor-bay, #504A9A);
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 16.8px */
  align-self: stretch;
  margin: 0;
  padding: 0;
}

.text-large {
  color: var(--governor-bay, #504A9A);
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 19.2px */
  align-self: stretch;
  margin: 0;
  padding: 0;
}

a {
  color: var(--governor-bay, #504A9A);
  font-family: 'Courier Prime', Courier, monospace;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 16.8px */
  align-self: stretch;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  text-decoration-style: dotted;
  transition: 0.2s;
}

a:hover {
  color: var(--governor-bay, #504A9A);
  letter-spacing: 1px;
}

@media (max-width: 860px) {
  
  body {
    height: unset;
  }
  
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 120px;
    align-self: stretch;
  }
  
  .content-frame-2 {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    align-self: stretch;
  }
  
  #logo-frame {
    max-width: 52vh;
  }
}