:root {
  --turkis: #1fb5ad;
  --violett: #5b2a86;
  --rot: #8c1d40;
  --text: #2a1633;
  --hell: #fbf8fc;
  --karte: #ffffff;
  --link: #8c1d40;
  --ueberschrift: #5b2a86;
  --linie: #c9b7d8;
  --hinweis-bg: #f1e8f7;
  --warn-bg: #fff3cd;
  --foto-bg: #e8dff0;
  --schatten: rgba(91,42,134,.12);
}

:root[data-theme="dark"] {
  --text: #ece4f3;
  --hell: #17101e;
  --karte: #241833;
  --link: #5fd9d1;
  --ueberschrift: #c9a2f0;
  --linie: #4a3a5c;
  --hinweis-bg: #2d2040;
  --warn-bg: #3d3216;
  --foto-bg: #33244a;
  --schatten: rgba(0,0,0,.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background: var(--hell);
  line-height: 1.65;
}

h1, h2, h3 { line-height: 1.2; color: var(--ueberschrift); }
a { color: var(--link); }
a:hover { color: var(--turkis); }

header.site {
  background: linear-gradient(120deg, var(--turkis), var(--violett) 60%, var(--rot));
  color: #fff;
}
header.site .inner {
  max-width: 62.5rem;
  margin: 0 auto;
  padding: 0.8rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}
.brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-size: 1.6rem; }
.brand img { height: 3rem; width: 3rem; background: #fff; border-radius: 50%; padding: 0.25rem; }
nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
nav a { color: #fff; text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { text-decoration: underline; color: #fff; }

main { max-width: 62.5rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.hero {
  text-align: center;
  padding: 3rem 1rem;
  background: radial-gradient(circle at 30% 20%, rgba(31,181,173,.18), transparent 55%),
              radial-gradient(circle at 75% 80%, rgba(140,29,64,.18), transparent 55%);
  border-radius: 1rem;
}
.hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr)); gap: 1.2rem; }
.card {
  background: var(--karte);
  border-radius: .8rem;
  box-shadow: 0 0.125rem 0.625rem var(--schatten);
  overflow: hidden;
}
.card .body { padding: 1rem; }
.theme-toggle { margin-left: auto; background: rgba(255,255,255,.2); color: #fff; border: 0.0625rem solid rgba(255,255,255,.6); border-radius: 2rem; padding: .3rem .9rem; font: inherit; cursor: pointer; }
.theme-toggle:hover { background: rgba(255,255,255,.35); }
.card h3 { margin-top: 0; }

.button {
  display: inline-block;
  background: var(--violett);
  color: #fff;
  padding: .6rem 1.2rem;
  border-radius: 2rem;
  text-decoration: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.button:hover { background: var(--rot); color: #fff; }

/* Geschützte Bilder: Das Bild liegt als Hintergrund, eine
   durchsichtige Fläche liegt darüber, damit es sich nicht
   einfach per Rechtsklick speichern lässt. */
.foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--foto-bg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.foto::after { content: ""; position: absolute; inset: 0; }

form label { display: block; margin-top: 1rem; }
form input, form textarea, form select {
  width: 100%;
  padding: .6rem;
  font: inherit;
  border: 0.0625rem solid var(--linie);
  background: var(--karte);
  color: var(--text);
  border-radius: .4rem;
}
.hinweis { background: var(--hinweis-bg); border-left: 0.25rem solid var(--violett); padding: .8rem 1rem; border-radius: .3rem; }
.platzhalter { background: var(--warn-bg); border-left: 0.25rem solid #e0a800; padding: .6rem 1rem; }

footer.site { text-align: center; padding: 1.5rem 1rem; font-size: .9rem; border-top: 0.0625rem solid var(--linie); }
footer.site a { margin: 0 .5rem; }