/* ==========================================================================
   Bürgerbeteiligung – Umfragen
   Ergänzt style.css; Farben und Formularelemente kommen von dort.
   Vorbild für die Anmutung ist der gedruckte Fragebogen (Kopfbild, Bildleiste,
   Bewertungsskala von „sehr wenig“ bis „sehr viel“).
   ========================================================================== */

/* Breiter als eine reine Lesespalte: der Fragebogen besteht überwiegend aus
   Skalen und Auswahlkästchen, die nebeneinander stehen sollen. Die Fließtexte
   oben behalten über .umfrage-einleitung ihre lesbare Zeilenlänge. */
/* padding-top wie bei den übrigen Serviceseiten (z. B. .barrierefreiheit-layout),
   sonst klebt der Inhalt direkt unter dem farbigen Seitenkopf. */
.umfrage-layout { max-width: 1120px; margin: 0 auto; padding-top: 34px; }

/* Einleitung und Hintergrundtext nutzen die volle Breite (so gewünscht).
   Nötig ist dafür max-width:none an den Absätzen selbst, weil die
   Grundgestaltung jeden Absatz auf 65ch begrenzt. */
.umfrage-einleitung,
.umfrage-einleitung p,
.umfrage-hintergrund p,
.umfrage-bildhinweis { max-width: none; }

/* Kopfbereich mit großem Bild
   ========================================================================== */
.umfrage-kopfbild {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--color-bg-alt);
}
.umfrage-kopfbild img {
  width: 100%;
  height: clamp(220px, 38vw, 420px);
  object-fit: cover;
  /* Bei Landschaftsbildern liegt das Motiv meist unter der Bildmitte -
     ohne diese Verschiebung füllt der Himmel den Ausschnitt. */
  object-position: center 70%;
}
.umfrage-kopfbild-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: 4rem 1.5rem 1.25rem;
  color: #fff;
  /* Deckt hoch genug ab, damit auch die Überzeile über hellem Himmel lesbar
     bleibt (geprüft am Kopfbild des Dicel-Parks). */
  background: linear-gradient(to top, rgba(20, 32, 22, .94) 0%, rgba(20, 32, 22, .88) 55%, rgba(20, 32, 22, .6) 80%, rgba(20, 32, 22, 0) 100%);
}
.umfrage-kopfbild-text .umfrage-ueberzeile {
  margin: 0 0 .25rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}
.umfrage-kopfbild-text h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 1.15;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.umfrage-bildhinweis {
  margin: .5rem 0 1.75rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* Einleitung und Hintergrundtext
   ========================================================================== */
.umfrage-einleitung { font-size: 1.0625rem; }
.umfrage-einleitung > p:first-of-type { font-size: 1.15rem; }
.umfrage-unterschrift {
  margin-top: 1rem;
  font-style: italic;
  color: var(--color-text-muted);
}

.umfrage-hintergrund {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.umfrage-hintergrund h2 { margin-top: 0; }

.umfrage-bildreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.umfrage-bildreihe figure {
  margin: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.umfrage-bildreihe img { width: 100%; height: 180px; object-fit: cover; }
.umfrage-bildreihe figcaption {
  padding: .6rem .75rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

/* Laufzeit-Hinweis
   ========================================================================== */
.umfrage-laufzeit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: 1.5rem 0;
  padding: .85rem 1.1rem;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius);
  font-size: .95rem;
}
.umfrage-laufzeit strong { color: var(--color-primary-dark); }

/* Fragen
   ========================================================================== */
.umfrage-fragen { margin-top: 2rem; }

.umfrage-abschnitt {
  margin: 2.5rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-border);
}
.umfrage-abschnitt:first-child { margin-top: 0; }
.umfrage-abschnitt h2 { margin: 0; font-size: 1.5rem; }
.umfrage-abschnitt p { margin: .35rem 0 0; color: var(--color-text-muted); font-size: .95rem; }

.umfrage-frage {
  margin: 0 0 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.umfrage-frage.hat-bild {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1.25rem;
  align-items: start;
}
.umfrage-frage-bild {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.umfrage-frage-bild img { width: 100%; height: 130px; object-fit: cover; }

.umfrage-frage-titel {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.umfrage-frage-nummer { color: var(--color-primary); margin-right: .35rem; }
.umfrage-frage-hinweis {
  margin: 0 0 .75rem;
  font-size: .9rem;
  color: var(--color-text-muted);
}
.umfrage-pflicht { color: #a4262c; margin-left: .2rem; }
.umfrage-frage-fehler {
  display: block;
  margin-top: .5rem;
  color: #a4262c;
  font-size: .9rem;
  font-weight: 600;
}
.umfrage-frage[data-fehler="1"] { border-color: #a4262c; box-shadow: 0 0 0 1px #a4262c inset; }

/* Bewertungsskala
   ========================================================================== */
.umfrage-skala {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin-top: .75rem;
  padding: .75rem .5rem .35rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius);
}
.umfrage-skala-label {
  flex: 0 1 auto;
  padding-bottom: .55rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.umfrage-skala-werte {
  display: flex;
  flex: 1 1 auto;
  justify-content: space-between;
  gap: .25rem;
}
.umfrage-skala-wert {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 44px;
  padding: .3rem .2rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.umfrage-skala-wert:hover { background: var(--color-primary-light); }
.umfrage-skala-wert input { width: 22px; height: 22px; margin: 0; accent-color: var(--color-primary); }
.umfrage-skala-wert:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Auswahlfragen
   ========================================================================== */
.umfrage-optionen {
  display: grid;
  /* 170 px, damit die fünf Einrichtungen aus Frage 2 in eine Zeile passen. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .4rem .9rem;
  margin-top: .6rem;
}
.umfrage-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}
.umfrage-option:hover { background: var(--color-primary-light); }
.umfrage-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--color-primary); flex: 0 0 auto; }
.umfrage-option:focus-within { outline: 3px solid var(--color-primary); outline-offset: 2px; }

.umfrage-sonstiges { margin-top: .6rem; }
.umfrage-sonstiges label { display: block; font-size: .9rem; margin-bottom: .2rem; }

.umfrage-frage input[type="text"],
.umfrage-frage textarea {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: inherit;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.umfrage-frage textarea { min-height: 120px; resize: vertical; }
.umfrage-frage input[type="text"]:focus,
.umfrage-frage textarea:focus { outline: 3px solid var(--color-primary); outline-offset: 1px; }

/* Abschluss
   ========================================================================== */
.umfrage-absenden {
  margin-top: 2rem;
  padding: 1.5rem;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.umfrage-absenden .btn { font-size: 1.05rem; padding: .8rem 2rem; }
.umfrage-datenschutz { margin-bottom: 1rem; font-size: .9rem; color: var(--color-text-muted); }
/* Rücklauf-Hinweis und PDF-Schaltfläche nebeneinander über die volle Breite -
   der Hinweis ist ein Einzeiler und soll nicht künstlich umbrechen. */
.umfrage-ruecklauf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  font-size: .9rem;
  color: var(--color-text-muted);
}
/* Der Hinweis bekommt die volle Breite, damit er in eine Zeile passt; die
   Schaltfläche rutscht dadurch in die nächste Zeile und steht rechts. */
/* max-width hebt die globale Absatzbreite von 65ch auf - die gilt der
   Lesbarkeit von Fließtext, hier steht aber eine einzelne Serviceangabe. */
.umfrage-ruecklauf-text { margin: 0; flex: 1 1 100%; max-width: none; }
.umfrage-pdf-knopf {
  flex: 0 0 auto;
  margin-left: auto;
  border-color: var(--color-primary);
  background: #fff;
  color: var(--color-primary);
}
.umfrage-pdf-knopf:hover { background: var(--color-primary-light); text-decoration: none; }

.umfrage-danke {
  padding: 2rem;
  background: var(--color-primary-light);
  border-left: 5px solid var(--color-primary);
  border-radius: var(--radius-lg);
}
.umfrage-danke h2 { margin-top: 0; }

.umfrage-geschlossen {
  padding: 1.25rem 1.5rem;
  background: var(--color-bg-alt);
  border-left: 5px solid var(--color-accent, #d98b3b);
  border-radius: var(--radius);
}

/* Übersicht /umfragen
   ========================================================================== */
.umfrage-liste { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.umfrage-karte {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg);
}
.umfrage-karte-bild { background: var(--color-bg-alt); }
.umfrage-karte-bild img { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.umfrage-karte-text { padding: 1.25rem 1.4rem; }
.umfrage-karte-text h2 { margin: .2rem 0 .4rem; font-size: 1.4rem; }
.umfrage-karte-text h2 a { color: inherit; text-decoration: none; }
.umfrage-karte-text h2 a:hover { text-decoration: underline; }
.umfrage-karte-untertitel { margin: .1rem 0 .5rem; color: var(--color-text-muted); }
.umfrage-karte .btn-secondary { border-color: var(--color-primary); background: #fff; color: var(--color-primary); }
.umfrage-karte .btn-secondary:hover { background: #f2efe4; text-decoration: none; }
.umfrage-status {
  display: inline-block;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.umfrage-status-laeuft { background: var(--color-primary-light); color: var(--color-primary-dark); }
.umfrage-status-beendet { background: var(--color-bg-alt-2); color: var(--color-text-muted); }

/* Ergebnisse (falls von der Gemeinde freigegeben)
   ========================================================================== */
.umfrage-ergebnis-balken {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr minmax(60px, auto);
  align-items: center;
  gap: .5rem .75rem;
  margin-top: .5rem;
  font-size: .9rem;
}
.umfrage-ergebnis-balken .balken {
  height: 14px;
  background: var(--color-bg-alt-2);
  border-radius: 999px;
  overflow: hidden;
}
.umfrage-ergebnis-balken .balken span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
}

/* Kleine Bildschirme
   ========================================================================== */
@media (max-width: 700px) {
  .umfrage-frage.hat-bild { grid-template-columns: 1fr; }
  .umfrage-frage-bild { order: -1; }
  .umfrage-frage-bild img { height: 160px; }
  .umfrage-karte { grid-template-columns: 1fr; }
  .umfrage-karte-bild img { min-height: 150px; max-height: 200px; }
  .umfrage-skala { flex-direction: column; align-items: stretch; gap: .35rem; }
  .umfrage-skala-label { padding-bottom: 0; text-align: center; white-space: normal; }
  .umfrage-skala-label.ende { order: 3; }
  .umfrage-skala-werte { order: 2; }
}

/* Druckfassung: der Bogen soll sich auch ausdrucken und per Hand ausfüllen
   lassen (Rückgabe im Rathaus, siehe Rücklauf-Hinweis). */
@media print {
  .umfrage-kopfbild-text { position: static; color: var(--color-text); background: none; padding: .5rem 0; }
  .umfrage-kopfbild-text h1 { color: var(--color-text); text-shadow: none; }
  .umfrage-kopfbild img { height: 180px; }
  .umfrage-absenden .btn, .umfrage-datenschutz { display: none; }
  .umfrage-frage { break-inside: avoid; border-color: #999; }
  .umfrage-skala { background: none; border: 1px solid #999; }
}