/* =========================================================================
   Ortsbeirat Trais-Horloff – Stildatei
   Farbwelt: angelehnt an das Corporate Design der Stadt Hungen (hungen.de).
   Hauptfarbe "Schäferstadt"-Grün #147937, Marineblau #0a1a73 nur als feiner
   Akzent. Schrift Open Sans. Modern, klar, mobile-first.
   ========================================================================= */

/* ---- Farb- und Größen-Variablen (zentral an einer Stelle änderbar) ---- */
:root {
  --gruen:         #147937;   /* Hungen-Grün (Schäferstadt) – Hauptfarbe */
  --gruen-dunkel:  #0f5e2b;   /* dunkles Grün (Verläufe, Hover) */
  --gruen-hell:    #e6f3ea;   /* sehr helles Grün (Flächen, Hinweise) */
  --blau:          #0a1a73;   /* Hungen-Blau – nur noch als feiner Akzent */
  --sand:          #f4f4f4;   /* Seitenhintergrund, helles Grau wie hungen.de */
  --text:          #0a0a0a;   /* fast schwarz */
  --text-leise:    #595959;
  --weiss:         #ffffff;
  --rand:          #d8d8d8;
  --fehler:        #b3261e;
  --erfolg:        #147937;   /* nutzt das Hungen-Grün */
  --schatten:      0 2px 10px rgba(10, 26, 115, 0.08);
  --schatten-tief: 0 6px 22px rgba(10, 26, 115, 0.12);
  --radius:        12px;
}

/* ---- Grundlagen ---- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* "Open Sans" wie hungen.de; system-ui als Reserve, falls die
     Web-Schrift mal nicht geladen werden kann. */
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sand);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 0.6rem; }
h2 { font-size: 1.25rem; }
a  { color: var(--gruen-dunkel); }

/* =========================================================================
   Kopfzeile
   ========================================================================= */
.kopf {
  background: linear-gradient(135deg, var(--gruen) 0%, var(--gruen-dunkel) 100%);
  color: var(--weiss);
  box-shadow: var(--schatten);
  /* Dünne blaue Akzentlinie (Hungen-Blau) – feiner Akzent unter dem Kopf */
  border-bottom: 4px solid var(--blau);
}
.kopf-inhalt {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.9rem 1.1rem;
}
.kopf-marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--weiss);
  text-decoration: none;
}
.kopf-welle {
  font-size: 1.8rem;
  line-height: 1;
  opacity: 0.85;
}
.kopf-text { display: flex; flex-direction: column; line-height: 1.15; }
.kopf-text strong { font-size: 1.15rem; letter-spacing: 0.3px; }
.kopf-text span   { font-size: 0.85rem; opacity: 0.9; }

/* =========================================================================
   Inhaltsbereich
   ========================================================================= */
.inhalt {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.2rem 1.1rem 2rem;
}

/* ---- Hero / Begrüßung ---- */
.hero { padding: 0.6rem 0 1.3rem; }
.hero h1 {
  font-size: 1.9rem;
  color: var(--gruen-dunkel);
}
.hero-text {
  font-size: 1.08rem;
  color: var(--text-leise);
  max-width: 36rem;
}

/* ---- Karte (weißer Block mit Schatten) ---- */
.karte {
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--schatten);
  margin-bottom: 1.2rem;
}

/* =========================================================================
   Formular
   ========================================================================= */
.formular { display: flex; flex-direction: column; gap: 1.1rem; }

.feld { display: flex; flex-direction: column; gap: 0.35rem; }
.feld label { font-weight: 600; font-size: 0.98rem; }

.feld-gruppe { display: flex; flex-direction: column; gap: 1.1rem; }

input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--weiss);
  border: 1.5px solid var(--rand);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
textarea { resize: vertical; min-height: 7rem; }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--gruen);
  box-shadow: 0 0 0 3px rgba(20, 121, 55, 0.18);
}

.pflicht     { color: var(--fehler); }
.freiwillig  { color: var(--text-leise); font-weight: 400; font-size: 0.85rem; }

.hinweis-anonym {
  background: var(--gruen-hell);
  border-left: 3px solid var(--gruen);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  color: var(--gruen-dunkel);
  margin: 0;
}

/* Honeypot-Feld komplett verstecken (nur für Bots sichtbar). */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================================
   Knöpfe
   ========================================================================= */
.knopf {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  background: var(--gruen);
  color: var(--weiss);
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  transition: background 0.15s, transform 0.05s;
}
.knopf:hover   { background: var(--gruen-dunkel); }
.knopf:active  { transform: translateY(1px); }
.knopf-gross   { width: 100%; padding: 0.9rem; font-size: 1.05rem; }

.knopf-leise {
  background: var(--gruen-hell);
  color: var(--gruen-dunkel);
}
.knopf-leise:hover { background: #cfe7d6; }

.knopf-loeschen {
  background: transparent;
  color: var(--fehler);
  border: 1.5px solid #e8c9c7;
}
.knopf-loeschen:hover { background: #fbecea; }

/* =========================================================================
   Info-Zeile (zwei kleine Hinweisblöcke)
   ========================================================================= */
.info-zeile { display: flex; flex-direction: column; gap: 0.8rem; }
.info-block {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--weiss);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
}
.info-block p { margin: 0; color: var(--text-leise); font-size: 0.95rem; }
.info-symbol { font-size: 1.6rem; }

/* =========================================================================
   Meldungen (Flash)
   ========================================================================= */
.meldungen { max-width: 720px; margin: 0.8rem auto -0.4rem; padding: 0 1.1rem; }
.meldung {
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}
.meldung-fehler  { background: #fbecea; color: var(--fehler); }
.meldung-erfolg  { background: #e7f4e8; color: var(--erfolg); }

/* =========================================================================
   Danke-Seite
   ========================================================================= */
.danke-karte { text-align: center; padding: 2.2rem 1.3rem; }
.danke-symbol {
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--gruen); color: var(--weiss);
  border-radius: 50%;
  font-size: 2rem; font-weight: 700;
}
.danke-karte .knopf { margin-top: 1rem; }

/* =========================================================================
   Login-Seite
   ========================================================================= */
.login-karte { max-width: 26rem; margin: 1.5rem auto; }

/* =========================================================================
   Admin-Bereich
   ========================================================================= */
.admin-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.admin-kopf h1 { margin: 0; }
.admin-statistik { margin: 0.2rem 0 0; color: var(--text-leise); font-size: 0.95rem; }

.anliegen-karte { border-left: 4px solid var(--gruen); }
.anliegen-karte.ist-erledigt { opacity: 0.7; border-left-color: var(--rand); }

.anliegen-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}
.abzeichen {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: var(--gruen-hell);
  color: var(--gruen-dunkel);
}
.abzeichen-offen    { background: #fff3df; color: #9a6b00; }
.abzeichen-erledigt { background: #e7f4e8; color: var(--erfolg); }
.anliegen-datum { font-size: 0.82rem; color: var(--text-leise); margin-left: auto; }

.anliegen-text {
  white-space: pre-wrap;   /* Zeilenumbrüche aus dem Formular beibehalten */
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
}
.anliegen-absender {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem;
  font-size: 0.9rem; color: var(--text-leise);
  padding-top: 0.7rem; border-top: 1px solid var(--rand);
}
.anliegen-absender .anonym { font-style: italic; }

.anliegen-aktionen {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 0.9rem;
}
.anliegen-aktionen form { margin: 0; }
.anliegen-aktionen .knopf { padding: 0.5rem 0.9rem; font-size: 0.9rem; }

.leer-hinweis { text-align: center; color: var(--text-leise); }

/* =========================================================================
   Fußzeile
   ========================================================================= */
.fuss {
  text-align: center;
  padding: 1.6rem 1.1rem 2rem;
  color: var(--text-leise);
  font-size: 0.88rem;
}
.fuss p { margin: 0.2rem 0; }
.fuss-klein a { color: var(--text-leise); }

/* =========================================================================
   Größere Bildschirme (Tablet/Desktop) – ab hier zweispaltige Bereiche
   ========================================================================= */
@media (min-width: 600px) {
  .feld-gruppe { flex-direction: row; }
  .feld-gruppe .feld { flex: 1; }
  .info-zeile { flex-direction: row; }
  .info-block { flex: 1; }
}