/* =========================================================
   Schema.org Generator – Styles (Basis: assets/css/tool-ui.css)
   ========================================================= */
.sg-types { margin-bottom: 18px; }
.sg-typegrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sg-type { position: relative; cursor: pointer; }
.sg-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sg-type span {
  display: grid; justify-items: start; gap: 2px; padding: 12px 14px; border-radius: 14px; height: 100%;
  background: rgba(15,19,48,.035); border: 1.5px solid transparent; transition: background .2s, border-color .2s;
}
.sg-type .i { width: 20px; height: 20px; margin-bottom: 6px; color: var(--muted); }
.sg-type b { font-size: 14px; color: var(--ink); }
.sg-type small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.sg-type:hover span { background: rgba(91,140,255,.07); }
.sg-type input:checked + span { background: rgba(91,140,255,.1); border-color: var(--blue); }
.sg-type input:checked + span .i { color: var(--blue); }
.sg-type input:focus-visible + span { outline: 2px solid #8fa8ff; outline-offset: 2px; }
.sg-help { margin-top: 14px; font-size: 14px; color: var(--text); }

.sg-legend { margin: -6px 0 14px; }
.sg-req { color: var(--err); font-weight: 700; }
.sg-rec { padding: 1px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700; color: #3b5bdb; background: rgba(91,140,255,.12); }
.sg-form { display: grid; gap: 18px; }
.sg-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.sg-group legend { margin-bottom: 10px; padding: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sg-group + .sg-group { padding-top: 16px; border-top: 1px solid rgba(15,19,48,.07); }

/* Wiederholbare Zeilen */
.sg-rows { display: grid; gap: 10px; }
.sg-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px; border-radius: 12px; background: rgba(15,19,48,.03); }
.sg-cell { flex: 1 1 130px; display: grid; gap: 4px; min-width: 0; }
.sg-cell .tu-input, .sg-cell .tu-select { min-width: 0; width: 100%; }
.sg-cell > span { font-size: 12px; font-weight: 600; color: var(--muted); }
.sg-cell .tu-textarea { min-height: 44px; }
.sg-del { flex: 0 0 34px; display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 5px; border-radius: 9px; color: var(--muted); }
.sg-del:hover { color: var(--err); background: rgba(209,52,56,.08); }
.sg-del .i { width: 16px; height: 16px; }
.sg-add { justify-self: start; margin-top: 10px; }

/* Ausgabe */
.sg-pre { max-height: 520px; font-size: 12.5px; }
.sg-pre .j-key { color: #82aaff; } .sg-pre .j-str { color: #c3e88d; } .sg-pre .j-num { color: #f78c6c; } .sg-pre .j-bool { color: #c792ea; } .sg-pre .j-tag { color: #f07178; }
.sg-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sg .tu-hint code { font-family: var(--mono); font-size: .9em; }

@media (max-width: 1100px) { .sg-typegrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sg-typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }