/* stil.css — Grundstil evaio (Vorgaben: docs/design.md) */

/* Schrift eurofurence (Freeware, Lizenz: assets/schriften/lizenz-eurofurence.txt) */
@font-face {
  font-family: "eurofurence";
  src: url("../schriften/eurofurenceLeicht.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "eurofurence";
  src: url("../schriften/eurofurenceNormal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "eurofurence";
  src: url("../schriften/eurofurenceFett.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "eurofurence";
  src: url("../schriften/eurofurenceNormalKursiv.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* Farb- und Formvorgaben als Variablen (hell) */
:root {
  --himmelBlau: #3D8BD4;
  --himmelBlauTief: #2C6DB3;
  --hausRot: #E2574C;
  --hausOrange: #F29A3F;
  --hausGruen: #6FA83C;
  --sonnenGelb: #F5C542;
  --flaeche: #F4F7FB;
  --karte: #FFFFFF;
  --text: #26303B;
  --textLeise: #5C6B7A;
  --linie: #D9E2EC;
  --fehler: #C0392B;
  --himmelOben: #8EC9F0;
  --himmelUnten: #DFF1FC;
  --radiusFeld: 12px;
  --radiusKarte: 16px;
}

/* Darkmode: Sternenhimmel-Stimmung, kraeftigere Farben */
@media (prefers-color-scheme: dark) {
  :root {
    --himmelBlau: #5AA6E8;
    --himmelBlauTief: #7ABAF0;
    --hausRot: #F07A70;
    --hausOrange: #F7B368;
    --hausGruen: #8FC45E;
    --flaeche: #14181F;
    --karte: #1E242E;
    --text: #E8EDF3;
    --textLeise: #9AA7B5;
    --linie: #323C49;
    --fehler: #E57368;
    --himmelOben: #0E1B2E;
    --himmelUnten: #1E3A5C;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "eurofurence", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--text);
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--himmelOben), var(--himmelUnten));
  display: flex;
  flex-direction: column;
}

/* Wolken ziehen langsam vorbei (nur Deko) */
.wolke {
  position: fixed;
  top: 8vh;
  width: 160px; height: 50px;
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  filter: blur(2px);
  animation: wolkenzug 80s linear infinite;
  z-index: 0;
}
.wolke::before {
  content: ""; position: absolute; left: 35px; top: -22px;
  width: 70px; height: 70px; background: inherit; border-radius: 50%;
}
.wolke.zwei { top: 20vh; transform: scale(.6); animation-duration: 120s; animation-delay: -40s; }
@media (prefers-color-scheme: dark) { .wolke { background: rgba(255,255,255,.08); } }
@keyframes wolkenzug {
  from { left: -220px; }
  to   { left: 110vw; }
}
@media (prefers-reduced-motion: reduce) { .wolke { animation: none; left: 10vw; } }

/* Inhalt mittig auf einer Karte */
.buehne {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 140px;  /* unten Platz fuer die Landschaft */
  position: relative;
  z-index: 1;
}
.karte {
  background: var(--karte);
  border-radius: var(--radiusKarte);
  box-shadow: 0 2px 6px rgba(38,48,59,.12), 0 12px 40px rgba(38,48,59,.10);
  padding: 40px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

/* Wortmarke */
.wortmarke {
  font-weight: 700;
  font-size: 3.6rem;
  letter-spacing: .01em;
  line-height: 1.1;
}
.wortmarke a { color: inherit; text-decoration: none; }
.claim {
  color: var(--textLeise);
  font-size: 1.05rem;
  margin-top: 4px;
}

.karte h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 28px 0 8px;
}
.karte p.hinweis { color: var(--textLeise); margin-bottom: 16px; }

/* Formular */
.formZeile { display: flex; gap: 8px; margin-top: 12px; }
input[type="email"] {
  flex: 1;
  font: inherit;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radiusFeld);
  padding: 12px 16px;
  box-shadow: inset 0 2px 4px rgba(38,48,59,.06);
}
input[type="email"]:focus-visible,
button:focus-visible {
  outline: 2px solid var(--himmelBlau);
  outline-offset: 2px;
}
button.hauptKnopf {
  font: inherit; font-weight: 700;
  color: #fff;
  background: linear-gradient(to bottom, var(--himmelBlau), var(--himmelBlauTief));
  border: 0;
  border-radius: var(--radiusFeld);
  padding: 12px 22px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(38,48,59,.18);
  transition: transform .08s ease, box-shadow .08s ease;
}
button.hauptKnopf:hover { box-shadow: 0 4px 10px rgba(38,48,59,.24); }
button.hauptKnopf:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(38,48,59,.2); }

/* Honigtopf-Feld fuer Bots unsichtbar verstecken */
.nichtAusfuellen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Meldungen */
.meldung { border-radius: var(--radiusFeld); padding: 12px 16px; margin-top: 16px; }
.meldung.gut { background: color-mix(in srgb, var(--hausGruen) 15%, var(--karte)); color: var(--text); border: 1px solid var(--hausGruen); }
.meldung.schlecht { background: color-mix(in srgb, var(--fehler) 12%, var(--karte)); color: var(--text); border: 1px solid var(--fehler); }

.kleingedrucktes { font-size: .875rem; color: var(--textLeise); margin-top: 14px; }
.kleingedrucktes a { color: var(--himmelBlau); }

/* Landschaftssilhouette unten */
.landschaft {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 0;
  pointer-events: none;
}
.landschaft svg { display: block; width: 100%; height: auto; }

/* Fusszeile mit Rechtslinks */
.fusszeile {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 12px;
  font-size: .875rem;
  color: var(--textLeise);
}
.fusszeile a { color: inherit; text-decoration: none; margin: 0 8px; }
.fusszeile a:hover { color: var(--himmelBlau); text-decoration: underline; }

@media (max-width: 520px) {
  .formZeile { flex-direction: column; }
  .wortmarke { font-size: 2.8rem; }
  .karte { padding: 28px 20px; }
}

/* Rechtsseiten (Impressum, Datenschutz, AGB, Jugendschutz) */
.karte.rechtSeite {
  max-width: 760px;
  text-align: left;
}
.rechtSeite h1 { font-size: 2rem; margin: 8px 0 16px; }
.rechtSeite h2 { font-size: 1.25rem; margin: 24px 0 8px; }
.rechtSeite p, .rechtSeite li { color: var(--text); margin-bottom: 10px; }
.rechtSeite ul { padding-left: 22px; }
.rechtSeite .stand { color: var(--textLeise); font-size: .875rem; }
.sprachWahl { text-align: right; font-size: .875rem; margin-bottom: 8px; }
.sprachWahl a, .sprachWahl strong { margin-left: 6px; color: var(--himmelBlau); }
.zurueck { display: inline-block; margin-top: 20px; color: var(--himmelBlau); }