/* ================== Grundlayout / Hintergrund ================== */
:root{
  /* Farben konsistent definieren */
  --orange-hell: #fdcb6e;
  --orange-dunkel: #e17055;
  --text-dunkel: #2d3436;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text-dunkel);
  background: linear-gradient(135deg, #fff9c4, #ffeaa7); /* gelber Verlauf */
}

.page-background {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* kleiner Seitenrand, damit auf Mobil ein Hintergrundstreifen sichtbar bleibt */
  padding: 0 8mm 12mm;
  box-sizing: border-box;
}

/* ================== Button-Bereich ================== */
/* 5 mm Abstand vom oberen Seitenrand */
.signup-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 5mm;
}

/* Button: halb so breit wie der .rahmen (max-width ~ 1050px), gleiche Orange-Farben */
.signup-btn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 26px;
  background: linear-gradient(145deg, var(--orange-hell), var(--orange-dunkel));
  box-shadow: 0 4px 15px rgba(253, 203, 110, 0.4);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;

  /* Breite halb so groß wie der Container */
  width: 50%;
  max-width: 525px; /* 50% von 1050px */
  min-width: 240px; /* gute Tap-Ziel-Größe */
}

.signup-btn:hover {
  background: linear-gradient(145deg, var(--orange-dunkel), #d63031);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(253, 203, 110, 0.6);
}
.signup-btn:active {
  transform: translateY(0);
}

/* ================== Flyer-Container ================== */
/* 5 mm Abstand unterhalb vom Button */
.rahmen {
  margin: 5mm auto 20px auto; /* oben 5mm Abstand zum Button */
  background: linear-gradient(145deg, var(--orange-hell), var(--orange-dunkel));
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  border-radius: 15px;
  color: #fff;

  /* Breite & Innenabstand */
  max-width: 1050px;
  width: 100%;
  padding: 25px;
  box-sizing: border-box;
  text-align: left;
}

/* Bild responsiv */
.rahmen img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Kontaktbereich (optional leicht abgesetzt für Lesbarkeit) */
.blindtext {
  margin-top: 15px;
  background: rgba(255,255,255,0.12);
  padding: 10px 12px;
  border-radius: 8px;
  line-height: 1.4;
}

/* ================== Responsives Verhalten ================== */
@media (max-width: 1024px) {
  .page-background {
    padding-left: 6mm;
    padding-right: 6mm;
  }
}

@media (max-width: 768px) {
  .rahmen {
    padding: 18px;
    border-radius: 12px;
    margin: 5mm auto 16px auto; /* oben bleibt 5mm Abstand */
  }
  .signup-btn {
    width: 70%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .page-background {
    padding-left: 4mm;
    padding-right: 4mm; /* sichtbarer Hintergrundrand */
  }
  .rahmen {
    padding: 14px;
    border-radius: 10px;
    margin: 5mm auto 14px auto; /* oben bleibt 5mm Abstand */
  }
  .signup-btn {
    width: 100%;
    min-width: 0;
    border-radius: 22px;
    font-size: 15px;
    padding: 11px 20px;
  }
}