/* CSS für den Hauptinhalt */

/* Haupttextfeld-Design, Styling für den zentralen Textbereich */
div.texts {
  display: inline-block;
  width: 63%;
  margin: 70px;
  padding: 20px;
  border-radius: 45px;
  border: 3px solid #F2F4FF;
  background: rgba(255, 255, 255, 0.1);
  /* 90% Transparenz */
  font-weight: bold;
  color: #F2F4FF;
}

/* Überschriften: Hauptüberschrift */
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 70px;
  margin-bottom: 1rem;
}

/* Unterüberschriften: Sekundäre Überschriften */
h2,
.subheading {
  font-family: 'Cinzel', serif;
  font-size: 50px;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Tertiäre Überschriften */
h3,
.subheading {
  font-family: 'Cinzel', serif;
  font-size: 30px;
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Fließtext und Formulareingaben, einheitliche Schriftgröße */
p,
button,
input,
textarea {
  font-size: 20px;
}

/* Listen ohne Punkte für Buttons */
ul {
  list-style-type: none;
  padding-left: 0;
}

/* Attribution, Quellenangabe im Fließtext */
p.attribution {
  font-style: italic;
  margin-top: 40px;
  margin-right: 40px;
  font-weight: normal;
  text-align: right;
}

/* Formularelemente, einheitliches Design für Inputs, Textareas und Selects */
input,
textarea,
select {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid #F2F4FF;
  border-radius: 45px;
  color: #F2F4FF;
  padding: 0.5rem 1rem;
  font-size: 40px;
  width: 100%;
}

/* Bild im Eingabebereich, Styling für Profilbilder */
.inputcontainer img {
  max-width: 200px;
  border-radius: 10px;
  margin-bottom: 1rem;
  border: 2px solid #F2F4FF;
}

/* Datei-Upload-Feld */
input[type="file"] {
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid #F2F4FF;
  border-radius: 45px;
  color: #F2F4FF;
  padding: 0.5rem 1rem;
  width: 100%;
}

/* Profilbereich, Layout für Profilseite */
.profile-section {
  display: flex;
  align-items: flex-start;
  padding-left: 80px;
  gap: 40px;
}

/* Profilinformationen, Abstand und max. Breite */
.profile-info {
  padding-left: 20px;
  max-width: 600px;
}


/* Responsive Anpassung für kleinere Bildschirme */
@media (max-width: 850px) {

  /* Grundlegende Anpassungen für kleinere Geräte */
  html,
  body {
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
  }

  /* Hauptinhalt, Spaltenlayout wird zu Zeilenlayout */
  .main-content {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }

  /* Textbereich, Anpassung der Breite und Abstände */
  .texts {
    width: calc(100% - 40px);
    margin: 20px;
    border-radius: 45px;
    padding: 13px;
    box-sizing: border-box;
  }

  /* Überschriften, kleinere Schriftgröße */
  h2,
  .subheading {
    font-size: 30px;
    /* Kleinere Unterüberschrift */
  }

  /* Fließtext und Formulare, kleinere Schriftgröße */
  p,
  button,
  input,
  textarea {
    font-size: 18px;
    /* Kleinere Textgröße */
  }

  /* Formularelemente, angepasste Größe und Radius */
  input,
  textarea,
  select {
    font-size: 24px;
    border-radius: 20px;
    padding: 0.5rem;
  }

  /* Profilbereich, Spaltenlayout zu Zeilenlayout */
  .profile-section {
    flex-direction: column;
    align-items: center;
    padding-left: 0;
  }

  /* Profilinformationen, zentrierter Text */
  .profile-info {
    padding-left: 0;
    text-align: center;
  }

}