@import "fonts.css";

html, body { margin: 0; padding: 0; background: #f7f7f7; font-family: 'Inter', Arial, sans-serif; }


.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 40px 30px 40px;
}

.back-button {
  background: none;
  border: none;
  color: var(--chip-text);
  cursor: pointer;
  width: 40px;
}

.logo {
  width: 150px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 30px 40px 30px 40px;
  gap: 20px;
}

.frame {
  overflow-y: auto !important;
}

.info-tile {
  display: flex;
  flex-wrap: wrap; /* <--- NEU */
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  padding: 22px 18px;
  gap: 15px 0px;
  flex-direction: row;
}


.info-spalte_1{
    display: flex; justify-content: flex-start; align-items: center; gap: 40px;
}

.info-icon img { width: 42px; height: 42px; }
.info-label { font-size: 1.1rem; color: #21C1AD; font-weight: 500; min-width: 120px;}
.info-value { font-size: 1.24rem; color: #151515; font-weight: 600; }
.job-title { font-size: 2.1rem; font-weight: 700; margin: 0 0 16px 0; color: #151515;}

.bewerben-btn {
  background: var(--brand); color: #fff; font-size: 1.18rem; font-weight: 600;
  border: none; border-radius: 12px; padding: 20px 0; cursor: pointer;
  width: 100%; transition: background .14s;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
}
.bewerben-btn:hover { background: #169787; }

@media (max-width: 800px) {
  .frame, .frame-wrapper { width: 100vw; min-height: 100%; border-radius: 0; box-shadow: none; }
  .content { padding: 24px 6vw 28px 6vw; }
  .info-tile{
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 768px) {
  .job-title { font-size: 1.8rem; }

.info-label { font-size: 1.1rem; }
.info-value { font-size: 1.1rem;}
}