/**
 * FWT Umfragen-Generator
 * Datei: tools/umfrage-generator/assets/umfrage-generator.css
 * Zweck: Aussehen des Fragen-Editors und der Erklaerungs-Box
 *
 * Stand: 2026-10-11
 * Wichtig: Der Editor liegt in einem Grid-Layout. Ohne "min-width: 0" machen
 * lange Woerter (Schluessel, Code) die ganze Seite breiter.
 */
.ug-explain { border: 2px solid #0f766e; border-radius: .75rem; background: #f0faf8; padding: 1rem 1.25rem; margin-bottom: 1.5rem; min-width: 0; max-width: 100%; color: #1c2333; }
.ug-explain-title { margin: 0 0 .5rem; }
.ug-explain__big { font-size: 1.05rem; }
.ug-explain code { white-space: normal; overflow-wrap: anywhere; }
.ug-explain ol, .ug-explain ul { padding-left: 1.4rem; }
.ug-explain li { margin-bottom: .35rem; }
.ug-strong { font-weight: 700; }

.ug-editor-wrap { margin-bottom: 1.5rem; min-width: 0; max-width: 100%; position: relative; }
.ug-editor-title { margin: 0 0 .5rem; }
.ug-editor { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

.ug-card { position: relative; border: 1px solid #aeb8c6; border-radius: .75rem; background: #fff; padding: .75rem 1rem; min-width: 0; }
.ug-card__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ug-card__num { font-weight: 700; color: #0f766e; min-width: 2.5rem; }
.ug-field { display: block; margin-bottom: .6rem; min-width: 0; }
.ug-field--small { max-width: 11rem; }
.ug-label { display: block; font-size: .85rem; font-weight: 700; color: #3f4a5a; margin-bottom: .2rem; }
.ug-hint { display: block; font-size: .78rem; color: #3f4a5a; margin-top: .15rem; }
.ug-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; min-width: 0; }

.ug-input, .ug-textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: .45rem .55rem; border: 1px solid #aeb8c6; border-radius: .4rem; font: inherit; font-size: .95rem; background: #fff; color: #1c2333; }
.ug-input--auto { width: auto; }
.ug-input--num { width: 6rem; }
.ug-textarea { min-height: 6rem; resize: vertical; }
.ug-input:focus, .ug-textarea:focus { outline: 3px solid #0f766e; outline-offset: 1px; }
.ug-input[aria-invalid="true"], .ug-textarea[aria-invalid="true"] { border-color: #9b1c1c; }
.ug-check { display: inline-flex; gap: .4rem; align-items: center; font-size: .92rem; cursor: pointer; }
.ug-check input { width: 1.1rem; height: 1.1rem; }

.ug-tools { display: flex; gap: .25rem; margin-left: auto; }
.ug-btn { min-width: 2.5rem; min-height: 2.5rem; border: 1px solid #aeb8c6; border-radius: .4rem; background: #f3f5f8; color: #1c2333; font: inherit; cursor: pointer; }
.ug-btn:hover { background: #e6ebf1; }
.ug-btn:focus-visible { outline: 3px solid #0f766e; outline-offset: 1px; }
.ug-btn--del { color: #9b1c1c; }
.ug-btn--add { padding: .45rem .9rem; font-weight: 600; }
.ug-addbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: .25rem; }
.ug-count { font-size: .85rem; color: #4a5565; }

.ug-msg { margin-top: .75rem; padding: .75rem 1rem; border-radius: .6rem; border: 1px solid #aeb8c6; background: #f3f5f8; color: #1c2333; overflow-wrap: anywhere; }
.ug-msg--err { border-color: #9b1c1c; background: #fdf0f0; }
.ug-msg--key { border: 2px solid #0f766e; background: #f0faf8; }
.ug-key { display: block; margin: .5rem 0; padding: .6rem .8rem; background: #fff; border: 1px dashed #0f766e; border-radius: .4rem; font: 700 1.15rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; }