/* css/grundwissen.css – Grundwissen (js/areas/wissen/grundwissen-*.js, vermoegen/absicherung.js, vermoegen/geraete.js). Eigene Klassen mit Präfix gw, nur Tokens aus design.css, Bereichsfarbe --a-wissen über data-area="wissen". */

.gwEmptyAct {
  justify-content: center;
  margin-top: var(--s3);
}
.gwPanel {
  gap: var(--s4);
}
.gwSearch {
  display: block;
  max-width: 560px;
}
.gwSearch .input {
  width: 100%;
}
.gwH2 {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  margin: var(--s3) 0 0;
}
mark.gwMark {
  background: var(--hl-gelb);
  border-radius: var(--r-sm);
}

/* Themen-Kacheln */
.gwTiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}
.gwTile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: var(--s4);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  min-width: 0;
  color: var(--ink);
}
.gwTile:hover {
  border-color: var(--a-wissen);
}
.gwTileIc,
.gwDevIc {
  display: inline-flex;
  padding: var(--s2);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--a-wissen) 14%, var(--surface));
  color: var(--a-wissen);
  flex: none;
}
.gwTileName {
  font-weight: 600;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}
.gwTileCount {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Listenzeilen */
.gwRow {
  cursor: pointer;
}
.gwRow:hover {
  background: var(--surface-2);
}
.gwShort2 {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gwShort2.is-missing {
  color: var(--ink-3);
  font-style: italic;
}
.gwSide {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-3);
  flex: none;
}

/* Fragen */
.gwAsk {
  display: flex;
  gap: var(--s2);
}
.gwAsk .input {
  flex: 1;
  min-width: 0;
}
.gwQ {
  align-items: flex-start;
  flex-wrap: wrap;
}
.gwQIc {
  color: var(--a-wissen);
  padding-top: 2px;
}
.gwQ .r-main {
  flex: 1 1 200px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gwQAct {
  display: flex;
  gap: var(--s1);
  align-items: center;
  flex: none;
}
.gwDone {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.gwDone > summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s4);
  cursor: pointer;
  list-style: none;
  color: var(--ink-2);
  font-weight: 500;
}
.gwDone > summary::-webkit-details-marker {
  display: none;
}
.gwDone > summary svg {
  transition: transform 0.15s;
}
.gwDone[open] > summary svg {
  transform: rotate(90deg);
}
.gwDone .list {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
}

/* Eintrag */
.gwMeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.gwShort {
  padding: var(--s4) var(--s5);
  background: color-mix(in srgb, var(--a-wissen) 12%, var(--surface));
  border-radius: var(--r-lg);
  border-left: 3px solid var(--a-wissen);
}
.gwShortLabel {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--a-wissen);
  margin: 0 0 var(--s1);
}
.gwShortText {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.45;
  margin: 0;
}
.gwShort.is-missing {
  background: var(--surface);
  border: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  justify-content: space-between;
}
.gwShort.is-missing p {
  color: var(--ink-2);
  margin: 0;
}
.gwBody {
  min-width: 0;
}
.gwLinks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.gwLinks a {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
}
.gwLinks a svg {
  margin-top: 2px;
}
.gwStand > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.gwStand > summary::-webkit-details-marker {
  display: none;
}
.gwStand[open] > summary {
  margin-bottom: var(--s3);
}
.gwDl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s1) var(--s3);
  font-size: var(--fs-sm);
  margin: 0 0 var(--s3);
}
.gwDl dt {
  color: var(--ink-3);
}
.gwDl dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.gwMono {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.gwWarn {
  display: flex;
  gap: var(--s2);
  align-items: flex-start;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  background: var(--warning-tint);
  color: var(--warning);
  margin: 0 0 var(--s3);
}
.gwWarn svg {
  margin-top: 2px;
}

/* Garantie */
.gwW {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gwW-ok {
  color: var(--success);
}
.gwW-soon {
  color: var(--warning);
}
.gwW-off,
.gwW-none {
  color: var(--ink-3);
}
.gwBanner {
  display: flex;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-lg);
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  margin: 0;
}
.gwBanner-ok {
  color: var(--success);
}
.gwBanner-soon {
  color: var(--warning);
  background: var(--warning-tint);
  border-color: transparent;
}
.gwBanner-off,
.gwBanner-none {
  color: var(--ink-2);
}

/* Formulare */
.gwForm {
  max-width: 860px;
}
.gwLabel {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.gwLabelRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
}
.gwLabelRow label {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.gwFormH {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-xl);
  margin: var(--s2) 0 0;
}
.gwFrom {
  margin-top: var(--s3);
}
.gwTags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: center;
  min-height: 40px;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.gwTags:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-tint);
}
.gwTagChips {
  display: contents;
}
.gwTags > input {
  flex: 1;
  min-width: 110px;
  border: 0;
  background: none;
  box-shadow: none;
  padding: var(--s1);
}
.gwTags > input:focus {
  box-shadow: none;
}
.gwChip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 2px var(--s1) 2px var(--s2);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  max-width: 100%;
}
.gwChip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gwChip button {
  display: inline-flex;
  border: 0;
  background: none;
  padding: var(--s1);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
}
.gwChip button:hover {
  color: var(--ink);
  background: var(--surface);
}
.gwSrcBox {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.gwSrcBox:empty {
  display: none;
}
.gwSrc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: var(--s2);
  align-items: center;
}
.gwFormActions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
  max-width: 860px;
  margin-top: var(--s4);
}
.gwQuick {
  margin-top: var(--s1);
}
.gwUnit {
  position: relative;
  display: flex;
  align-items: center;
}
.gwUnit input {
  flex: 1;
  min-width: 0;
  width: 100%;
}
.gwUnitU {
  position: absolute;
  right: var(--s3);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  pointer-events: none;
}
.gwUnit:has(.gwUnitU) input {
  padding-right: 64px;
}

/* Menü (⋯) und Dialoge hängen an body */
.gwMenu {
  position: fixed;
  top: var(--top);
  right: var(--right);
  z-index: 120;
  min-width: 220px;
  padding: var(--s1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  display: flex;
  flex-direction: column;
}
.gwMenu button {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s3);
  border: 0;
  background: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}
.gwMenu button:hover {
  background: var(--surface-2);
}
.gwMenu .is-danger {
  color: var(--danger);
}
.dialog.gwDlg {
  max-width: 460px;
  max-height: calc(100vh - var(--s6));
  overflow-y: auto;
}
.gwDlgBody {
  margin-bottom: var(--s4);
}
.gwIconGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: var(--s2);
}
.gwIconBtn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--a-wissen) 14%, var(--surface));
  border-color: var(--a-wissen);
  color: var(--a-wissen);
}

/* Einstellungen */
.gwSetRow {
  flex-wrap: wrap;
  gap: var(--s2);
}
.gwSetIc {
  color: var(--a-wissen);
  flex: none;
}
.gwSetIc.plain {
  display: inline-flex;
  width: 34px;
  justify-content: center;
}
.gwSetInput {
  flex: 1 1 140px;
  min-width: 0;
}
.gwSetN {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gwSetBtns {
  display: flex;
  gap: var(--s1);
  margin-left: auto;
}
.gwKind {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.gwKind > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s2) var(--s4);
  cursor: pointer;
  list-style: none;
}
.gwKind > summary::-webkit-details-marker {
  display: none;
}
.gwKind > summary > svg:last-child {
  color: var(--ink-3);
  transition: transform 0.15s;
}
.gwKind[open] > summary > svg:last-child {
  transform: rotate(180deg);
}
.gwKindMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gwKindName {
  font-weight: 600;
}
.gwKindSecs {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gwKindBody {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
  border-top: 1px solid var(--border);
}
.gwKindBody .field {
  margin-bottom: 0;
}
.gwKindFoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  justify-content: space-between;
}
.gwFieldRow {
  flex-wrap: wrap;
  gap: var(--s2);
}
.gwFieldLabel {
  flex: 1 1 140px;
  min-width: 0;
}
.gwFieldUnit {
  flex: 0 0 96px;
}

@media (min-width: 640px) {
  .gwTiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .gwTiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .gwSide .tag {
    display: none;
  }
  .gwSrc {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .gwSrc > input:first-child {
    grid-column: 1;
  }
  .gwSrc > input:nth-child(2) {
    grid-column: 1;
  }
  .gwSrc > button {
    grid-column: 2;
    grid-row: 1;
  }
  .gwQAct {
    width: 100%;
    justify-content: flex-end;
  }
  .gwSetBtns {
    width: 100%;
    justify-content: flex-end;
  }
  .gwFieldLabel {
    flex-basis: calc(100% - 104px);
  }
  .gwShortText {
    font-size: var(--fs-lg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .gwDone > summary svg,
  .gwKind > summary > svg:last-child {
    transition: none;
  }
}