/* Reset & base styles */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
}

body {
  min-height: 100vh;
  font-family: 'Quicksand', Arial, sans-serif;
  color: #000; /* Default text color black */
  background-color: #fff; /* White background */
  display: flex;
  flex-direction: column;
  position: relative; /* Needed for pseudo-element positioning */
}

/* Körnige Textur als SVG, URL-codiert für CSS */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.02; /* Stärke der Textur */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none; /* Damit man durchklicken kann */
  z-index: -1; /* Hinter den Inhalt legen */
}

.container {
  flex-grow: 1;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding: 0; /* Remove padding to allow image to extend fully */
  align-items: center; /* Vertically align columns/content in the center */
  justify-content: center; /* Horizontally center columns */
  gap: 1rem; /* Reduced gap for potentially more space for text */
  position: relative; /* For absolute positioning of the screenshot */
  overflow: hidden; /* Ensure no scrolling */
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center items within columns by default */
  justify-content: center;
  text-align: center;
}

.left-column {
  flex-basis: 25%; 
  align-items: flex-start;
  text-align: left;
  padding: 2rem 2rem 4rem 8rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative; /* Für den Gradienten-Pseudo-Element */
  overflow: visible; /* Sicherstellen, dass Pseudo-Element nicht abgeschnitten wird, falls es leicht übersteht */
}

.left-column::before {
  content: '';
  position: absolute;
  top: -20%; /* Startpunkt des Gradienten anpassen */
  left: -20%;
  width: 140%; /* Größe des Gradienten anpassen, damit er weich ausläuft */
  height: 140%;
  background: radial-gradient(circle at top left, rgba(255, 0, 0, 0.15) 0%, rgba(255,0,0,0) 60%); /* Stärkerer, fokussierter roter Schein */
  pointer-events: none;
  z-index: -1; /* Hinter den Text legen */
  opacity: 0.7; /* Sichtbarkeit des Scheins */
  transform: rotate(-15deg); /* Leichte Drehung für den diagonalen Effekt */
}

.right-column {
  flex-basis: 45%;
  display: flex;
  flex-direction: column; /* Will be used to position phone-frame */
  align-items: flex-end; /* Align phone-frame to the right */
  justify-content: flex-end; /* Align phone-frame to the bottom */
  height: 100vh; /* Ensure it takes full viewport height */
  padding-right: 2%; /* Some space from the very edge */
}

.mobile-only-icon {
  display: none !important; /* Force hide on desktop */
}

.app-icon {
  width: clamp(80px, 15vw, 120px); /* Responsive size */
  height: clamp(80px, 15vw, 120px);
  margin-bottom: 1.5rem;
  /* Approximate Apple app icon corner rounding */
  /* For a perfect square, a common technique is border-radius: 22.5%; */
  /* Or specific px value if size is fixed. Since it's responsive, % is better. */
  border-radius: 22.5%; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.app-name {
  font-family: 'Inter', sans-serif; /* Use Inter font */
  font-weight: 700; /* Bold */
  font-size: clamp(4.375rem, 8.75vw, 6.25rem); /* Approx 25% larger */
  margin: 0 0 0.75rem 0;
  color: #000;
  letter-spacing: -1.5px;
}

.tagline {
  font-size: clamp(3rem, 6vw, 4.5rem); 
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  letter-spacing: -1px;
  color: #000;
  line-height: 1.1;
}

.highlight {
  color: #D02023;
  position: relative;
  white-space: nowrap;
}

/* Removing the ::after for highlight as it might not fit the white design well */
/* .highlight::after { ... } */

.desc {
  font-size: clamp(1.2rem, 2.5vw, 1.6rem); 
  font-weight: 400;
  margin: 0;
  color: #333;
  line-height: 1.6;
  max-width: 90%;
}

/* New div to wrap screenshot and button */
.phone-frame {
  position: relative; /* Stays relative for flow, but parent controls major position */
  display: flex; /* Use flex to position button above image */
  flex-direction: column-reverse; /* Stack button on top of image */
  align-items: flex-start; /* Align button to the left of the image */
  /* width: auto; // Determined by image content */
}

/* Button now positioned relative to phone-frame */
.appstore-btn {
  position: relative; /* No longer absolute to frame, flows in flex */
  transform: none; /* Reset transform */
  left: 20%; top: 5%; /* Reset positioning */
  width: clamp(250px, max(30%, 300px), 300px); /* Ensure button isn't too wide */
  margin: 0 0 0.5rem 0; /* Minimal padding below button (now above image) */
  z-index: 10; /* Keep on top */
}

.appstore-btn img {
  width: 100%;
  height: auto;
  display: block;
  filter: none;
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
}

.appstore-btn:hover {
  transform: translateY(-2px);
}

.appstore-btn:active {
  transform: translateY(0px);
}

.homescreen-app-preview {
  position: relative; 
  display: block;
  margin: 0;
  height: 75vh; 
  width: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  /* This will now be at the bottom of the right-column due to parent's justify-content: flex-end */
}

/* Footer Styles */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  padding: 10px 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-top: 1px solid rgba(0,0,0,0.05); /* Subtle top border */
}

footer nav a {
  font-size: clamp(0.7rem, 1.8vw, 0.75rem);
  font-weight: 500;
  color: #555; /* Dark gray for footer links */
  text-decoration: none;
  margin: 0 clamp(8px, 1.2vw, 12px);
  padding: 3px 0;
  transition: color 0.3s ease;
}

footer nav a:hover {
  color: #000; /* Black on hover */
}

/* Mobile Layout: Single Column */
@media (max-width: 768px) {
  body::before { /* Körnigkeit auch auf Mobile, ggf. anpassen */
    opacity: 0.05;
  }

  .container::before { /* Gradient für Mobile */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Bis ca. zur Mitte */
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.12) 0%, rgba(255,0,0,0) 80%); /* Stärkerer roter Schein von oben */
    pointer-events: none;
    z-index: -1; /* Hinter den Inhalt */
    opacity: 0.6;
  }

  .container {
    flex-direction: column;
    justify-content: flex-start; /* Align to top for scrolling */
    padding: 6rem 1rem 70px 1rem;
    gap: 0; /* Remove container gap, manage spacing within columns */
    overflow-y: auto;
  }

  .left-column,
  .right-column {
    flex-basis: auto;
    width: 100%;
    align-items: center;
    text-align: center;
    gap: 0; /* Remove column gap, use margins on elements */
    padding: 0; /* Reset padding, use margins on elements */
  }
  
  .left-column {
    order: 1;
    margin-bottom: 2rem; /* Space between text block and button/image block */
  }

  .right-column {
    order: 2;
    height: auto;
    justify-content: center; /* Center its content (button & image) */
  }

  .mobile-only-icon {
    display: block !important;
    width: clamp(60px, 15vw, 70px); /* Slightly smaller icon */
    height: clamp(60px, 15vw, 70px);
    margin: 0 auto 1rem auto; /* Centered, defined bottom margin */
    border-radius: 22.5%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .app-name {
    font-family: 'Inter', sans-serif; /* Inter on mobile too */
    font-weight: 700;
    font-size: clamp(2rem, 8vw, 2.8rem); /* Adjusted mobile size */
    margin: 0 auto 0.75rem auto; /* Consistent margin */
  }

  .tagline {
    font-size: clamp(1.8rem, 7vw, 2.5rem); /* Adjusted mobile size */
    margin: 0 auto 0.75rem auto; /* Consistent margin */
  }

  .desc {
    font-size: clamp(0.9rem, 3.5vw, 1rem); /* Adjusted mobile size */
    max-width: 95%;
    margin: 0 auto 0 auto; /* Remove specific bottom margin to allow left-column margin-bottom to rule */
  }

  .phone-frame { /* Reset desktop flex behavior for mobile */
    display: contents; /* Effectively remove the frame's own layout influence */
  }

  .appstore-btn {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    transform: none;
    order: 1; /* Button first */
    width: clamp(180px, 70%, 250px); /* Adjusted mobile size */
    margin: 0 auto 1.5rem auto; /* Centered, defined bottom margin */
  }

  .homescreen-app-preview {
    order: 2; /* Image second */
    position: relative;
    right: auto;
    bottom: auto;
    height: auto; /* Auto height */
    width: clamp(220px, 80vw, 340px); /* Adjusted mobile size */
    max-height: 45vh; /* Limit height a bit more */
    margin: 0 auto; /* Centered */
  }
}