/* *{margin:0;padding:0}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;text-size-adjust:100%;line-height:1.5;overflow-x:hidden} */
*, *::before, *::after { box-sizing: border-box; }
html {
<!--
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-size-adjust:100%;
  line-height:1.25;
  overflow-x:hidden;
-->
  background-color:#06b;
}
<!--
*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
-->
.wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  align-items: center;
  justify-items: center;
}
@media screen and (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1fr 1fr;
  }
}
body{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;text-align:center;color: #630;background-color: #eef}
header{display:block;background-color: #06b;padding-top:10px;border-top:5px solid #ec6}
nav, footer{font-size:1.3em;background-color:#06b}
nav ul, footer ul{display:flex;justify-content:center;flex-wrap:wrap}
nav li, footer li{list-style: none}
nav a, nav span, footer a, footer span{display:block;font-weight:bold;padding:0.1em 0.4em;text-decoration:none;width:8em;border:none}
nav a, nav span{border-radius:10px 10px 0 0;margin:0 0.3em}
footer a, footer span{border-radius: 0 0 10px 10px;margin:0 0.3em 0.6em}
nav span, footer span{background-color:#eef}
nav a, footer a{color:#630;background-color:#fd8;box-shadow:0px 5px 15px #ffd inset}
footer a{box-shadow:0px -5px 15px #ffd inset}
nav a:hover, footer a:hover{color:#ffc;background-color:#a00}
nav{margin-bottom:0.4em}
footer{border-bottom:5px solid #ec6}
footer li p{font-size:0.8em;margin-top:0.5em;margin-left: 1em;color: #fed}
#menu {display:none}

@media screen and (max-width: 53em) {
	#menu{display:block}
	nav a{display:none}
}

article p, article ul {
  text-align: justify;
  text-justify: inter-word; /* Verbessert Abstände */
  hyphens: auto; /* Aktiviert Silbentrennung */
  margin: 1em;
  font-size:1.5em;
}
ul{padding-left: 1em}

@supports (display:grid) {.older{display: none}}
.older{color:#000;background-color:#f99}

/* Basis */
form {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2rem;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
}

/* Feldgruppen */
.form-group {
  margin-bottom: 1.5rem;
}

/* Labels */
label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #1a1a1a;
}

/* Eingabefelder */
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Fokuszustand */
input:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Validierungsfarben */
input:valid:not(:placeholder-shown) {
  border-color: #16a34a;
}

input:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #dc2626;
}

/* Textarea */
textarea {
  resize: vertical;
  min-height: 8rem;
}

/* Datenschutzhinweis */
.form-privacy p {
  font-size: 0.875rem;
  color: #6b7280;
}

.form-privacy a {
  color: #2563eb;
  text-decoration: underline;
}

/* Absendebutton */
button[type="submit"] {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: #2563eb;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}

button[type="submit"]:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

button[type="submit"]:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 480px) {
  form {
    padding: 1rem;
  }

  button[type="submit"] {
    width: 100%;
    text-align: center;
  }
}