/* LINK LIBRARY – Headings konsistent mit Site-Headings */

/* 1) Kategorie-/Bereichsüberschriften */
.linklistcatname,
.ll-title { /* .ll-title optional: falls du manuelle Titel nutzt */
  color: var(--titel) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;              /* falls du’s neutral willst: auf 'none' stellen */
  text-wrap: balance;
  margin: 0 0 var(--space-2) 0 !important;
  padding: 0 0 var(--space-2) 0 !important;

  /* dünne Linie wie in Block B (50-blog-archive.css) */
  background:
    linear-gradient(120deg, var(--titel) 0%, var(--hell) 100%)
    no-repeat 0 100% / 100% 4px;
  border: 0 !important;
}

/* Optional: kleinere Stufe wie h2/h3 aus deiner Skala */
.linklistcatname { font-size: clamp(1rem, .9rem + .5vw, 1.2rem) !important; }
.ll-title        { font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem) !important; }

/* 2) Beschreibung unter der Kategorie – dezenter Fließtext */
.linklistcatnamedesc{
  font-size: 0.95em;
  font-weight: 400;
  margin: 0 0 var(--space-3) 0;
  padding: 0;
  color: var(--dunkel);
  border: 0 !important;
}

/* 3) Link-Listen – Typo & Links wie global */
.linktable,
table.linklisttable{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: var(--space-3) 0;
}
.linktable a,
table.linklisttable a{
  color: var(--dunkel);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}
.linktable a:hover,
table.linklisttable a:hover{ color: var(--titel); }

/* Kopfzeilen optisch wie Content-Tabellen */
table.linklisttable th{
  background: var(--hgf);
  color: var(--dunkel);
  font-weight: 700;
  padding: .6em .7em;
  border: 2px solid var(--marker);
}
table.linklisttable td{
  padding: .6em .7em;
  border-bottom: 2px solid var(--marker);
  vertical-align: top;
}

/* 4) Grid-Items – responsive statt fester 300px */
.ll-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.ll-grid-item{
  width: auto !important;                     /* fester Wert weg */
  border: 1px solid var(--marker);
  border-radius: var(--radius-s, 8px);
  padding: var(--space-3);
  margin: 0;                                  /* Abstand kommt aus grid-gap */
  background: var(--card-bg);
}

/* 5) Bedien-Buttons (Filter/Toggle) – Farben aus Tokens */
.cattoggle, .cattogglehideall, .cattoggleshowall{
  margin: var(--space-2);
  padding: .5rem .75rem;
  border-radius: var(--radius-s, 8px);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--titel) 60%, transparent);
  background: var(--hgf);
  color: var(--dunkel);
}
.catactive, .cattogglehideall, .cattoggleshowall{
  background: var(--titel);
  color: var(--hell);
  border-color: var(--titel);
}
.catinactive{
  background: color-mix(in srgb, var(--marker) 35%, var(--hgf));
  color: var(--dunkel);
}

/* 6) Sonstiges Feintuning */
a.featured{ font-weight: 700; }
.resulttitle{ padding-top: var(--space-2); }

/* RSS-Box optisch angleichen */
#ll_rss_results{
  border: 1px solid var(--marker);
  margin: var(--space-2) 0 0 var(--space-2);
  padding: var(--space-1) 0 0 0;
  background: var(--hgf);
}
.rsstitle{ color: var(--dunkel); font: 400 .95em Georgia, "Times New Roman", Times, serif; }
.rsstitle a{ color: inherit; text-decoration: underline; }

/* 7) Mobile – Tabellen erträglicher */
@media (max-width: 600px){
  table.linklisttable th, table.linklisttable td{
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-right: 0;
    border-left: 0;
  }
  .ll-grid{ grid-template-columns: 1fr; }
}

/* 8) Überschriften in “Page Links”-Bereichen */
.lib_wrap .lib_col .linklistcatname{ /* falls das Markup so verschachtelt ist */
  margin-top: var(--space-3) !important;
}