/* gaias.social — gemeinsames Stylesheet (statische Unternehmens-/Rechtsseiten)
   Farben kommen aus schemata.css (erzeugt aus den GAIAs-Plattform-Schemata).
   Hier stehen nur Struktur und Abstaende, keine festen Farbwerte mehr. */
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: var(--fg);
  line-height: 1.65;
  background: var(--bg);
}
header.site { margin-bottom: 2.5rem; }
header.site .brand {
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  color: inherit;
}
nav.site {
  margin-top: .4rem;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
nav.site a { color: var(--verweis); text-decoration: none; }
nav.site a:hover, main a:hover { text-decoration: underline; color: var(--verweis-hover); }
nav.site a[aria-current="page"] { color: inherit; font-weight: 600; }
h1 { font-size: 1.55rem; line-height: 1.3; margin: 0 0 1.2rem; }
h2 { font-size: 1.12rem; margin-top: 2.2rem; }
h3 { font-size: 1rem; margin-top: 1.6rem; }
main a { color: var(--verweis); }
footer.site {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rand);
  font-size: .85rem;
  color: var(--gedaempft);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
footer.site a { color: inherit; }
.stand { color: var(--gedaempft); font-size: .9rem; }

/* --- Darstellungs-Umschalter (wird von theme.js eingesetzt) ------------- */
.darstellung {
  margin-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .7rem;
  font-size: .82rem;
  color: var(--gedaempft);
}
.darstellung select,
.darstellung button {
  font: inherit;
  color: var(--fg);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: .5rem;
  padding: .18rem .55rem;
  cursor: pointer;
}
.darstellung button:hover,
.darstellung select:hover { border-color: var(--verweis); }
.darstellung :focus-visible { outline: 2px solid var(--verweis); outline-offset: 1px; }

/* --- Hinweiskasten ------------------------------------------------------ */
.hinweis {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent);
  border-radius: .6rem;
  padding: .9rem 1.1rem;
  margin: 1.4rem 0;
}
.hinweis p:first-child { margin-top: 0; }
.hinweis p:last-child { margin-bottom: 0; }
.hinweis h2 { margin-top: 0; }

/* --- Formular ----------------------------------------------------------- */
form.gaias { margin-top: 1.6rem; }
form.gaias .feld { margin-bottom: 1.1rem; }
form.gaias label {
  display: block;
  font-weight: 600;
  font-size: .92rem;
  margin-bottom: .3rem;
}
form.gaias .erklaerung {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: var(--gedaempft);
  margin-top: .15rem;
}
form.gaias input[type="text"],
form.gaias input[type="email"],
form.gaias textarea {
  font: inherit;
  width: 100%;
  color: var(--fg);
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: .55rem;
  padding: .5rem .7rem;
}
form.gaias input:focus-visible,
form.gaias textarea:focus-visible {
  outline: 2px solid var(--verweis);
  outline-offset: 1px;
  border-color: var(--verweis);
}
form.gaias textarea { min-height: 5.5rem; resize: vertical; }
form.gaias fieldset.gruppe {
  border: 1px solid var(--rand);
  border-radius: .6rem;
  padding: .9rem 1.1rem .3rem;
  margin: 0 0 1.1rem;
}
form.gaias fieldset.gruppe legend {
  font-weight: 600;
  font-size: .92rem;
  padding: 0 .4rem;
}
form.gaias fieldset.gruppe > .erklaerung { margin: 0 0 .9rem; }
form.gaias fieldset.gruppe .feld:last-of-type { margin-bottom: .9rem; }
form.gaias input:invalid { border-color: var(--akzent); }
form.gaias button[type="submit"] {
  font: inherit;
  font-weight: 600;
  color: var(--bg);
  background: var(--verweis);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .5rem 1.4rem;
  cursor: pointer;
}
form.gaias button[type="submit"]:hover { background: var(--verweis-hover); }
/* Honigtopf: fuer Menschen unsichtbar, fuer stumpfe Automaten verlockend.
   Bewusst NICHT display:none — etliche Automaten ueberspringen genau das. */
form.gaias .honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.vorschau {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--flaeche);
  border: 1px dashed var(--rand);
  border-radius: .5rem;
  padding: .45rem .7rem;
  display: inline-block;
  margin-top: .3rem;
}
.meldung {
  border-radius: .6rem;
  padding: .8rem 1.1rem;
  margin: 1.2rem 0;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--verweis);
}