/* ============================================================
   HAUPTSTRUKTUR
   ============================================================ */
#lexicon{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:30px;
    width:100%;
    align-items:start;
}

/* ============================================================
   NAVIGATION (Links)
   ============================================================ */
#lexicon #navigation{
    display:flex;
    flex-direction:column;
    gap:14px;
}

/* Blaue Header-Balken */
#lexicon #navigation .navigation-headline{
    min-height:48px;

    display:flex;
    align-items:center;

    background:#18130f;

    border:1px solid rgba(190,154,98,.18);

    color:var(--tbf-gold);

    font-family:var(--tbf-font-display);
    font-size:1.1rem;
    letter-spacing:.08em;
    text-transform:uppercase;

    padding:0 18px;
}

#lexicon #navigation .navigation-headline:first-child {
    margin-top: 0;
	 
}

/* Positionierung der Links im Header (Text vs. E/X) */
#lexicon #navigation .navigation-headline a {
    color: var(--tbf-gold);
    text-decoration: none;
    transition: opacity 0.3s;
}

/* Der Kategoriename (Erster Link) */
#lexicon #navigation .navigation-headline a:first-child {
    flex-grow: 1;
    text-align: center;
    margin-left: 30px; /* Ausgleich für die Icons rechts, damit Text mittig bleibt */
}

/* Die Icons E und X (Die weiteren Links im Header) */
#lexicon #navigation .navigation-headline a[href*="edit"],
#lexicon #navigation .navigation-headline a[href*="delete"] {
    font-size: 11px;
    background: rgba(190,154,98,.12);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 3px;
    margin-left: 5px;
    flex-grow: 0;
}

/* Schiebt den ersten Icon-Link nach rechts */
#lexicon #navigation .navigation-headline a[href*="edit"] {
    margin-left: auto;
}

#lexicon #navigation .navigation-headline a:hover {
    opacity: 0.8;
   background: rgba(190,154,98,.25);
}

/* Suche */
#lexicon #navigation .navigation-search{
    padding:18px;
    background:#14110d;
    border:1px solid rgba(190,154,98,.12);
}

#lexicon #navigation .navigation-search input.textbox {
     width:100%;
    padding: 5px;
    font-size: 12px;
}

/* Menüpunkte */
#lexicon #navigation .navigation-item,
#lexicon #navigation .navigation-subitem{

    padding:10px 16px;

    background:#14110d;

    border:1px solid rgba(190,154,98,.08);

    transition:.2s;
}

#lexicon #navigation .navigation-item:hover,
#lexicon #navigation .navigation-subitem:hover{

    background:#1a140f;

    border-color:rgba(190,154,98,.28);

    padding-left:22px;
}


#lexicon #navigation .navigation-item a,
#lexicon #navigation .navigation-subitem a {
    color:var(--tbf-text);
}


/* Unterpunkte */
#lexicon #navigation .navigation-subitem {
    padding-left: 25px;
    font-style: italic;
    font-size: 12px;
}

#lexicon #navigation .navigation-subitem::before {
    content: '';
    margin-right: 5px;
    color: var(--tbf-gold);
}

/* ============================================================
   CONTENT-BEREICH (Rechts)
   ============================================================ */
#lexicon .lexicon-entry{

    background:linear-gradient(
        180deg,
        #18130f 0%,
        #130f0c 100%
    );

    border:1px solid rgba(190,154,98,.15);

    box-shadow:
        inset 0 0 40px rgba(255,255,255,.015);

    border-radius:0;
}

#lexicon .entry-headline{
    height:80px;
    justify-content:center;
    align-items:center;
    background:none;
    color:var(--tbf-gold);
    font-family:var(--tbf-font-display);
    font-size:3rem;
    border-bottom:1px solid rgba(190,154,98,.15);
    padding:0 0 0 30px;
}

#lexicon .entry-subline{
    background:none;
    color:var(--tbf-text-muted);
    text-align:right;
 padding: 5px 30px 10px 0;
}

#lexicon .entry-subline a {
    color: var(--tbf-text-muted);
    text-decoration: none;
}

/* ============================================================
   REGELTEXTE & FORMATIERUNG (FIX ROTE STRICHE)
   ============================================================ */
.lextext {
    padding: 40px;
    line-height: 1.6;
    color: var(--tbf-text);
    font-family: Arial, sans-serif;
}

.lextext h1 {
    margin: 10px 0 10px 0;
    padding: 12px 20px;
    background: var(--tbf-bg-panel-alt);
color: var(--tbf-gold);
    text-transform: uppercase;
    font-size: 1.3rem;
    border-radius: 4px;
}

.lextext h2 {
    margin: 15px 0 5px 0; /* Geringer Abstand nach unten */
    font-size: 1rem;
    text-transform: uppercase;
    
    padding-bottom: 5px;
  border-bottom: 2px solid var(--tbf-gold);
color: var(--tbf-gold);
}

.lextext p {
    border-left: 3px solid var(--tbf-gold);
    font-size: 0.875rem;
    text-align: justify;
    margin: 0 0 10px 0;
    padding: 5px 0 5px 20px;
    line-height: 1.5;
}

/* Kompression der Abstände */
.lextext p + p, 
.lextext h2 + p, 
.lextext h1 + p,
.lextext h2 + ul {
    margin-top: 0px !important;
}

.lextext strong, .lextext b {
    text-transform: uppercase;
    color: var(--tbf-gold);
    font-weight: bold;
}

/* Listen */
.lextext ul {
    list-style-type: none;
    padding: 5px 0 10px 0;
    margin: 0;
}

.lextext li {
    position: relative;
    padding: 2px 0 2px 25px;
    margin-bottom: 2px;
    font-size: 0.875rem;
    line-height: 1.4;
}

.lextext li::before {
    content: '»';
    position: absolute;
    left: 5px;
    color: var(--tbf-bg);
    font-weight: bold;
}

.age-highlight {
    background: var(--tbf-gold);
    color: var(--tbf-bg);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.lextext img {
    max-width: 500px;
    display: block;
    margin: 10px auto;
}
/* ============================================================
   TABELLEN
   ============================================================ */

.lextext table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0 25px;
    font-size: 0.875rem;
}

.lextext th {
    text-align: left;
    text-transform: uppercase;
    padding: 8px 10px;
    color: var(--tbf-gold);
    border-bottom: 1px solid rgba(190,154,98,.18);
}

.lextext td {
    padding: 8px 10px;
    vertical-align: top;
}

.lextext tr:not(:last-child) td {
    border-bottom: 1px solid rgba(190,154,98,.08);
}

.lextext td:first-child {
    width: 28%;
    font-weight: bold;
    color: var(--tbf-gold);
}

.lextext table,
.lextext tbody,
.lextext tr,
.lextext th,
.lextext td {
    margin: 0 !important;
    padding: 6px 10px !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
}