/* ==========================================================================
   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
   ========================================================================== */
/* Das Formular ist ein zweispaltiges Raster, in dem standardmäßig ALLES über
   die volle Breite läuft. Nur einzeilige Textfragen belegen eine Spalte und
   stehen dadurch paarweise nebeneinander (z. B. Alter und Familienstand).
   Der Zeilenabstand kommt weiterhin aus den Abständen der Elemente, deshalb
   nur ein Spaltenabstand. */
.umfrage-fragen {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
  align-items: start;
}
.umfrage-fragen > * { grid-column: 1 / -1; }
.umfrage-fragen > .umfrage-frage--kurz { grid-column: span 1; }

.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) {
  /* Auf dem Handy steht jede Frage wieder allein in einer Zeile. */
  .umfrage-fragen { grid-template-columns: minmax(0, 1fr); }
  .umfrage-fragen > .umfrage-frage--kurz { grid-column: 1 / -1; }
  .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; }
}

/* Kennzeichnung von KI-Bildern
   ==========================================================================
   Die Bilder zeigen etwas, das es noch nicht gibt. Ohne Kennzeichnung liest
   sich das wie eine Zusage - jemand kreuzt "Laufbrunnen" an und erwartet
   genau den Brunnen vom Bild.

   Das Schildchen liegt auf dem Bild und nicht daneben: Wer die Seite
   überfliegt, sieht das Bild - eine Zeile darunter überliest er. Der
   erklärende Satz steht zusätzlich in der Bildunterschrift, wo er auch
   vorgelesen wird. */
.umfrage-kopfbild,
.umfrage-bildreihe figure,
.umfrage-frage-bild {
  position: relative;
}

.umfrage-ki-schild {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  /* Dunkel und deckend statt halbtransparent: Diese Bilder sind hell und
     wechselhaft, eine durchscheinende Plakette wäre auf manchen unlesbar. */
  background: rgba(20, 32, 22, .92);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}
.umfrage-ki-schild i { font-size: .85em; }

.umfrage-ki-text {
  display: block;
  font-style: italic;
}
.umfrage-bildhinweis .umfrage-ki-text { display: inline; }

/* Das Fragebild hatte bisher keine Bildunterschrift - der Hinweis bekommt
   deshalb hier seinen eigenen Abstand. */
.umfrage-frage-bild figcaption {
  padding: .5rem .7rem;
  font-size: .8125rem;
  color: var(--color-text-muted);
}

@media print {
  /* Auf Papier fällt die Farbe weg; der Rahmen hält das Schild sichtbar. */
  .umfrage-ki-schild {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }
}

/* Erfassung von Papierbögen: deutlich abgesetzt, damit niemand im Zweifel
   ist, dass er gerade nicht den normalen Fragebogen ausfüllt. */
.umfrage-erfassung {
  margin: 0 0 28px;
  padding: 16px 20px;
  border: 1px solid #e0c9a0;
  border-left: 5px solid #d08a1c;
  border-radius: 12px;
  background: #fdf6e8;
}
.umfrage-erfassung p { margin: 0; }
.umfrage-erfassung p + p { margin-top: 10px; }
.umfrage-erfassung-erfolg {
  padding-bottom: 10px;
  border-bottom: 1px solid #e8d9b8;
  color: #2f5d34;
}
.umfrage-erfassung-hinweis { font-size: .95rem; }