/* Erzeugt aus werkzeuge/glossar.html durch
   werkzeug/bewertung_zerlegen.py - hier nichts von Hand aendern.
   Alle Selektoren haengen unter .glossar-werkzeug, und die mit dem Theme
   gemeinsamen Klassennamen tragen das Praefix gl-. Ohne beides
   gestaltet das Werkzeug den Seitenkopf um - und das Theme den
   Werkzeug-Hero. */
.glossar-werkzeug {
  --gl-gruen:         #264233;
  --gl-gruen-dunkel:  #1B3025;
  --gl-gruen-hell:    #3A5C48;
  --gl-gold:          #C0A668;
  
  --gl-gold-dunkel:   #7E6127;
  --gl-gold-auf-dunkel:#C9B078;
  --gl-creme:         #F6F3ED;
  --gl-creme-tief:    #EDE8DE;
  --gl-weiss:         #FFFFFF;

  --gl-text:          #1F2A23;
  --gl-text-leise:    #55645B;
  --gl-text-auf-dunkel:#F6F3ED;
  --gl-text-leise-dunkel:#C3CEC7;

  --gl-linie:         #DFD9CC;

  --gl-schrift: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  
  --gl-breite: 1000px;
  --gl-rand: 24px;

  --gl-raum-xs: 8px;
  --gl-raum-s:  16px;
  --gl-raum-m:  28px;
  --gl-raum-l:  48px;

  --gl-radius:   4px;
  --gl-radius-l: 8px;

  --gl-schatten: 0 2px 12px rgba(31,42,35,.07);
  --gl-uebergang: 180ms ease;
}
@media (max-width:600px) {
.glossar-werkzeug { --gl-rand:18px; --gl-raum-l:36px; }
}
.glossar-werkzeug .gl-huelle *, .glossar-werkzeug .gl-huelle *::before, .glossar-werkzeug .gl-huelle *::after { box-sizing:border-box; }
.glossar-werkzeug [hidden] { display:none !important; }
.glossar-werkzeug {
  margin:0;
  font-family:var(--gl-schrift);
  font-size:17px;
  line-height:1.65;
  color:var(--gl-text);
  background:var(--gl-creme);
}
.glossar-werkzeug .gl-huelle { max-width:var(--gl-breite); margin:0 auto; padding:var(--gl-raum-m) var(--gl-rand) var(--gl-raum-l); }
.glossar-werkzeug .gl-kopf { padding-top:var(--gl-raum-s); max-width:44em; }
.glossar-werkzeug .gl-marke {
  font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--gl-gold-dunkel); margin-bottom:var(--gl-raum-s);
}
.glossar-werkzeug .gl-kopf h1 {
  margin:0 0 var(--gl-raum-s); font-size:clamp(1.6rem, 4.5vw, 2.2rem);
  line-height:1.18; font-weight:700; color:var(--gl-gruen);
}
.glossar-werkzeug .gl-vorspann { margin:0; color:var(--gl-text-leise); }
.glossar-werkzeug .gl-suchbereich {
  margin-top:var(--gl-raum-l); padding:var(--gl-raum-m) var(--gl-rand);
  background:var(--gl-weiss); border:1px solid var(--gl-linie);
  border-radius:var(--gl-radius-l); box-shadow:var(--gl-schatten);
}
.glossar-werkzeug .gl-suchlabel { display:block; font-weight:600; font-size:.88rem; margin-bottom:6px; }
.glossar-werkzeug .gl-suchfeld {
  width:100%; padding:13px 14px;
  font:inherit; font-size:1rem; color:var(--gl-text);
  background:var(--gl-weiss); border:1px solid var(--gl-linie);
  border-radius:var(--gl-radius); -webkit-appearance:none; appearance:none;
  transition:border-color var(--gl-uebergang);
}
.glossar-werkzeug .gl-suchfeld:focus { border-color:var(--gl-gruen-hell); }
.glossar-werkzeug .gl-suchfeld::placeholder { color:#6B7A73; }
.glossar-werkzeug .gl-suchhinweis { margin:var(--gl-raum-xs) 0 0; font-size:.82rem; color:var(--gl-text-leise); }
.glossar-werkzeug .gl-suchzeile {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--gl-raum-xs) var(--gl-raum-s); margin-top:var(--gl-raum-s);
}
.glossar-werkzeug .gl-treffer { margin:0; font-size:.85rem; font-weight:600; color:var(--gl-gruen); }
.glossar-werkzeug .gl-zuruecksetzen {
  padding:0; font:inherit; font-size:.85rem; color:var(--gl-gruen-hell);
  background:none; border:0; border-bottom:1px solid currentColor; cursor:pointer;
}
.glossar-werkzeug .gl-zuruecksetzen:hover { color:var(--gl-gruen); }
.glossar-werkzeug :focus-visible { outline:2px solid var(--gl-gruen-hell); outline-offset:2px; }
.glossar-werkzeug .gl-sprungmarken {
  display:flex; flex-wrap:wrap; gap:var(--gl-raum-xs) var(--gl-raum-s);
  margin-top:var(--gl-raum-m); align-items:baseline;
}
.glossar-werkzeug .gl-sprungmarken-titel { margin:0; font-size:.82rem; color:var(--gl-text-leise); }
.glossar-werkzeug .gl-sprungmarke {
  font-size:.85rem; font-weight:600; color:var(--gl-gruen);
  text-decoration:none; border-bottom:1px solid var(--gl-gold);
  padding-bottom:1px;
}
.glossar-werkzeug .gl-sprungmarke:hover { border-bottom-color:var(--gl-gruen); }
.glossar-werkzeug .gl-gruppe { margin-top:var(--gl-raum-l); }
.glossar-werkzeug .gl-gruppentitel {
  margin:0 0 var(--gl-raum-s); padding-bottom:var(--gl-raum-xs);
  font-size:1.15rem; font-weight:700; color:var(--gl-gruen);
  letter-spacing:.01em; border-bottom:2px solid var(--gl-gold);
}
.glossar-werkzeug .gl-eintrag {
  margin-top:var(--gl-raum-s); padding:var(--gl-raum-m) var(--gl-rand);
  background:var(--gl-weiss); border:1px solid var(--gl-linie);
  border-radius:var(--gl-radius-l); box-shadow:var(--gl-schatten);
  scroll-margin-top:var(--gl-raum-m);
}
.glossar-werkzeug .gl-wort {
  margin:0 0 var(--gl-raum-s); font-size:1.15rem; font-weight:700;
  line-height:1.25; color:var(--gl-gruen); overflow-wrap:anywhere;
}
.glossar-werkzeug .gl-wort-ru {
  margin:0 0 var(--gl-raum-xs); font-size:.92rem; font-weight:600;
  color:var(--gl-gold-dunkel); overflow-wrap:anywhere;
}
.glossar-werkzeug .gl-spalten { display:flex; flex-wrap:wrap; gap:var(--gl-raum-s) var(--gl-raum-m); }
.glossar-werkzeug .gl-spalte { flex:1 1 min(320px, 100%); min-width:0; }
.glossar-werkzeug .gl-sprachmarke {
  margin:0 0 var(--gl-raum-xs); font-size:.72rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gl-text-leise);
}
.glossar-werkzeug .gl-text {
  margin:0; font-size:.95rem;
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:break-word;
}
@media (min-width:740px) {
.glossar-werkzeug .gl-spalte + .gl-spalte {
    padding-left:var(--gl-raum-m);
    border-left:1px solid var(--gl-linie);
  }
.glossar-werkzeug .gl-spalten { gap:0; }
.glossar-werkzeug .gl-spalte { flex:1 1 min(320px, 100%); padding-right:var(--gl-raum-m); }
.glossar-werkzeug .gl-spalte + .gl-spalte { padding-right:0; }
}
.glossar-werkzeug .gl-quelle {
  margin:var(--gl-raum-s) 0 0; padding-top:var(--gl-raum-s);
  border-top:1px solid var(--gl-linie);
  font-size:.82rem; color:var(--gl-text-leise);
}
.glossar-werkzeug .gl-quelle-marke { font-weight:600; color:var(--gl-text); }
.glossar-werkzeug .gl-leermeldung {
  margin-top:var(--gl-raum-m); padding:var(--gl-raum-m) var(--gl-rand);
  background:var(--gl-creme-tief); border-radius:var(--gl-radius-l);
  color:var(--gl-text-leise);
}
.glossar-werkzeug .gl-hinweis {
  margin-top:var(--gl-raum-l); padding:var(--gl-raum-s) var(--gl-raum-m);
  background:var(--gl-creme-tief); border-left:3px solid var(--gl-gold);
  border-radius:0 var(--gl-radius) var(--gl-radius) 0;
  font-size:.86rem; color:var(--gl-text-leise); line-height:1.6;
}
.glossar-werkzeug .gl-hinweis strong { color:var(--gl-text); }
.glossar-werkzeug .gl-cta {
  margin-top:var(--gl-raum-l); padding:var(--gl-raum-m) var(--gl-rand);
  background:var(--gl-gruen); border-radius:var(--gl-radius-l);
}
.glossar-werkzeug .gl-cta h2 {
  margin:0 0 var(--gl-raum-s); font-size:1.2rem; font-weight:700; line-height:1.25;
  color:var(--gl-text-auf-dunkel);
}
.glossar-werkzeug .gl-cta p { margin:0; font-size:.95rem; color:var(--gl-text-leise-dunkel); }
.glossar-werkzeug .gl-knopf-zeile { display:flex; flex-wrap:wrap; gap:var(--gl-raum-s); margin-top:var(--gl-raum-m); }
.glossar-werkzeug .gl-knopf {
  flex:1 1 min(240px, 100%);
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 24px; font:inherit; font-size:1rem; font-weight:600;
  text-align:center; text-decoration:none;
  border:1px solid transparent; border-radius:var(--gl-radius);
  transition:background var(--gl-uebergang), color var(--gl-uebergang),
             border-color var(--gl-uebergang);
}
.glossar-werkzeug .gl-knopf-gold { background:var(--gl-gold-dunkel); color:var(--gl-weiss); }
.glossar-werkzeug .gl-knopf-gold:hover { background:#6A511F; }
.glossar-werkzeug .gl-knopf-neben { background:transparent; color:var(--gl-text-auf-dunkel); border-color:rgba(246,243,237,.35); }
.glossar-werkzeug .gl-knopf-neben:hover { background:var(--gl-creme); color:var(--gl-gruen); border-color:var(--gl-creme); }
.glossar-werkzeug .gl-fuss { margin-top:var(--gl-raum-l); text-align:center; font-size:.8rem; color:var(--gl-text-leise); }
@media (max-width:359px) {
.glossar-werkzeug { font-size:16px; }
.glossar-werkzeug .gl-wort { font-size:1.05rem; }
.glossar-werkzeug .gl-wort-ru { font-size:.88rem; }
.glossar-werkzeug .gl-text { font-size:.88rem; }
.glossar-werkzeug .gl-gruppentitel { font-size:1.05rem; }
}
