#lexicon {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30px;
}

/* NAVIGATIONSBEREICH */
#lexicon #navigation {
  flex: 1 1 250px;
  max-width: 300px;
  font-family: var(--fliesstext);
  font-size: var(--txtsmall);
  color: var(--txtcol);
  overflow: hidden;
		backdrop-filter: blur(2px);
	  background: var(--tbl-main-tr2);
    padding: 10px;
}

#lexicon #navigation .navigation-headline {
  padding: 5px;
  font-weight: bold;
  text-transform: lowercase;
  text-align: center;
  color: var(--akzent-dkl);
  font-family: var(--akzenttext);
  font-size: var(--txtxl);
}

#lexicon #navigation .navigation-item,
#lexicon #navigation .navigation-subitem,
#lexicon #navigation .navigation-search {
  padding: 10px 15px;
  background: var(--tbl-main-tr);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

#lexicon #navigation .navigation-item:last-child {
  border-bottom: none;
}

#lexicon #navigation .navigation-search input.textbox {
  flex: 1;
  padding: 5px;
  border: 1px solid var(--akzent-green);
  background: var(--akzent-dkl);
  color: var(--txtcol);
}

/* EINTRAGSBEREICH */
#lexicon .lexicon-entry {
  flex: 1 1 600px;
  background: var(--tbl-main-tr2);
  font-family: var(--fliesstext);
  color: var(--txtcol);
  overflow: hidden;
  padding: 10px;
}

#lexicon .lexicon-entry .entry-headline {
  padding: 5px;
	text-align: center;
  font-size: var(--txtxxxl);
    font-family: var(--akzenttext);
    color: var(--akzent-dkl);
    text-decoration: none;
    text-shadow: 3px 2px 1px var(--tbl-main-tr);
}

#lexicon .lexicon-entry .entry-subline {
  padding: 5px 10px;
  text-align: right;
  background: var(--tbl-main);
  font-size: var(--txtxsmall);
  color: var(--akzent-flash2);
}

#lexicon .lexicon-entry .entry {
  padding: 20px;
  font-size: var(--txtm);
  line-height: 1.3em;
  text-align: justify;
  text-align-last: left;
  white-space: pre-line;
  background: var(--tbl-main);
}

#lexicon .lexicon-entry .content-bit {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: space-between;
  background: var(--tbl-main);
}

#lexicon .content-letter {
  flex: 1 1 45%;
}

#lexicon .content-item {
  margin-bottom: 10px;
  font-size: var(--txtsmall);
}

#lexicon .content-item-cat {
  font-size: var(--txtxsmall);
  color: var(--akzent-flash2);
}

#lexicon .lexicon_search_results {
  margin-bottom: 10px;
  padding: 10px;
  background: var(--tbl-main);
  font-size: var(--txtsmall);
}

#lexicon .navigation-item:hover, #lexicon .navigation-subitem:hover {
	background: var(--akzent-dkl) !important;
	color: var(--akzent-flash3) !important;
	font-weight: 900;
	letter-spacing: 0.05em;
}

/* Style the tab */
.infotab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.infotab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.infotab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.infotab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.infotabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}