/* Simple Glossary – Frontend Styles (Columns Grid + Clear Button Fix) */
.simple-glossary[data-sg]{
  width:100% !important; max-width:100% !important; margin:0 auto !important;

  /* Design-Variablen */
  --sg-border:#e0e0e0;
  --sg-text:#232323;

  --sg-active-bg:#0069B3;
  --sg-title:#0069B3;                /* Karten-Titel */
  --sg-category-title:#0069B3;       /* Ãœberschrift der Buchstaben-Gruppen */

  --sg-gap:.35rem;
  --sg-cell:44px;

  --sg-radius-input:.6rem;
  --sg-radius-letter:.45rem;
  --sg-radius-card:.6rem;

  --sg-card-border:#f0f0f0;
  --sg-card-border-hover:#e8e8e8;
  --sg-card-padding:.9rem;

  /* Spaltenanzahl */
  --sg-grid-cols:4;

  --sg-input-bg:#fff;
  --sg-input-bg-focus:#fff;
  --sg-focus:#0069B3;
  --sg-cancel-color:#0069B3;

  --sg-letter-border-w:1px;
  --sg-letter-border-style:solid;
  --sg-letter-border-color:#e0e0e0;
  --sg-letter-bg:#fff;
  --sg-letter-text:#232323;

  --sg-card-title:#222;
  --sg-highlight:#ffec99;

  --sg-clear-bg:#fff;
  --sg-clear-text:#232;
  --sg-clear-border:#e0e0e0;
  --sg-clear-radius:.6rem;

  --sg-input-h: 42px;
}

/* ---------- Searchbar ---------- */
.sg-searchbar{margin-bottom:.75rem !important}
.sg-searchwrap{
  position:relative !important;
  display:flex !important;
  gap:.5rem !important;
  align-items:center !important;
}

#sg-search{
  flex:1 1 auto !important;
  width:100% !important;
  padding:0 .9rem !important;
  height:var(--sg-input-h) !important;
  border:1px solid var(--sg-border) !important;
  border-radius:var(--sg-radius-input) !important;
  background:var(--sg-input-bg) !important;
  transition:background .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
#sg-search:focus{
  outline:none !important;
  background:var(--sg-input-bg-focus) !important;
  box-shadow:0 0 0 3px color-mix(in oklab, var(--sg-focus) 20%, transparent) !important;
  border-color:var(--sg-focus) !important;
}

#sg-search::-webkit-search-cancel-button{
  -webkit-appearance:none;
  height:1em; width:1em;
  background: radial-gradient(var(--sg-cancel-color), var(--sg-cancel-color)) center/100% 100% no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3 10.59 10.6 16.89 4.3z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M18.3 5.71 12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3 10.59 10.6 16.89 4.3z"/></svg>') center/contain no-repeat;
}

.sg-searchwrap.has-clear #sg-search::-webkit-search-cancel-button{ display:none; }

.sg-clear{
  height:var(--sg-input-h) !important;
  border:1px solid var(--sg-clear-border) !important;
  background:var(--sg-clear-bg) !important;
  color:var(--sg-clear-text) !important;
  border-radius:var(--sg-clear-radius) !important;
  padding:0 .9rem !important;
  cursor:pointer !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
}
.sg-clear:hover{ box-shadow:0 0 0 2px rgba(0,0,0,.05) inset !important }

/* ---------- Letter-Bar ---------- */
.sg-az{
  display:flex !important; flex-wrap:wrap !important;
  gap:var(--sg-gap) !important; margin:.35rem 0 1rem !important;
}
.sg-az.sg-sticky{ position:sticky !important; top:0 !important; z-index:5 !important; background:#fff !important; padding:.5rem 0 .75rem !important; }
.sg-az button{
  flex:0 0 var(--sg-cell) !important; width:var(--sg-cell) !important; height:36px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  border:var(--sg-letter-border-w) var(--sg-letter-border-style) var(--sg-letter-border-color) !important;
  border-radius:var(--sg-radius-letter) !important;
  background:var(--sg-letter-bg) !important;
  cursor:pointer !important;
  font-weight:600 !important; color:var(--sg-letter-text) !important;
  transition:box-shadow .1s ease, color .1s ease, border-color .1s ease, background .1s ease !important;
  user-select:none !important; text-align:center !important;
  white-space:nowrap !important;           /* <- NEU: kein Zeilenumbruch, # 0–9 bleibt einzeilig */
}

/* Ausnahme: der # 0–9-Button darf breiter werden */
.sg-az button[data-letter="#"]{
  flex:0 0 auto !important;
  width:auto !important;
  padding-inline:.85rem !important;
  hyphens:none !important;
}

.sg-az button:hover{ box-shadow:0 0 0 2px rgba(0,0,0,.05) inset !important }
.sg-az button.is-active{ background:var(--sg-active-bg) !important; border-color:var(--sg-active-bg) !important; color:#fff !important }
.sg-az button[hidden]{ display:none !important }

/* ---------- Cards ---------- */
.sg-letter{ font-size:1.15rem !important; margin:.75rem 0 .5rem !important; color:var(--sg-category-title) !important }
.sg-cards{
  display:grid !important;
  grid-template-columns: repeat(var(--sg-grid-cols), minmax(0, 1fr)) !important;
  gap:1rem !important;
}
.sg-item{
  position:relative !important;
  border:1px solid var(--sg-card-border) !important;
  border-radius:var(--sg-radius-card) !important;
  background:#fff !important;
  padding:var(--sg-card-padding) !important;
  transition:transform .12s ease, box-shadow .16s ease, border-color .12s ease !important;
  cursor:pointer !important;
}
.sg-item:hover{ transform:translateY(-1px) !important; box-shadow:0 6px 16px rgba(0,0,0,.06) !important; border-color:var(--sg-card-border-hover) !important }
.sg-title{ font-size:1rem !important; margin:.1rem 0 .4rem !important; color:var(--sg-card-title) !important }
.sg-excerpt{ margin:0 !important; color:#555 !important; font-size:.95rem !important }
.sg-link{ position:absolute !important; inset:0 !important; border-radius:var(--sg-radius-card) !important; text-indent:-9999px !important }
.sg-empty{ text-align:center !important; padding:1rem !important; color:#777 !important }
.simple-glossary mark{ background:var(--sg-highlight) !important; color:inherit !important; padding:0 .1em !important; border-radius:.2em !important }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .simple-glossary[data-sg]{ --sg-grid-cols:2 }
}
@media (max-width:640px){
  .simple-glossary[data-sg]{ --sg-cell:36px; --sg-grid-cols:1 }
}