:root {
    --font-fam: 'Poppins', sans-serif;

    --font-color: rgb(231, 231, 231);
    --background-back: black;
    --header: rgba(40, 38, 40, 0.6);
    --background-box: rgb(30, 29, 29);
    --box-shadow-main: rgb(70, 69, 69);
    --border-main: grey;
    --color-faeden: #FFC857;
    --color-pfoten: #40E0D0;
    --color-pixel: #9B5DE5;
    --color-aromen: #FF6347;
    --color-box: #1f2426;

}

/* Grundlayout */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

main.container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  box-sizing: border-box;
  border: 2px solid var(--color-pfoten);
  background-color: var(--color-box);
  
}

/* Überschrift */
main.container h1 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

/* Formularstruktur */
form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

/* Labels und Inputs */
label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 0.95rem;
}

input[type="text"],
input[type="file"],
input[type="url"],
textarea {
  font: inherit;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

input[type="file"] {
  padding: 0.4rem;
}

/* Grid-Aufteilung allgemein */
.grid {
  display: grid;
  gap: 1rem;
}

/* Adresszeile – Strasse / PLZ / Ort / Land */
.grid:nth-of-type(1) {
  grid-template-columns: 2fr 1fr 2fr 0.6fr;
}

/* Koordinatenzeile – Breite / Länge */
.grid:nth-of-type(2) {
  grid-template-columns: 1fr 1fr;
}

/* Button */
button {
  align-self: flex-start;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

/* Responsives Verhalten */
@media (max-width: 600px) {
  main.container {
    padding: 1.5rem 1rem;
  }

  .grid:nth-of-type(1),
  .grid:nth-of-type(2) {
    grid-template-columns: 1fr;
  }

  button {
    width: 100%;
    text-align: center;
  }
}