.navbar-brand { font-weight: 700; letter-spacing: .2px; }
main { max-width: 1100px; margin-inline: auto; }


comment-title,
hands-on-title,
warning-title,
reference-title,
lecture-title{
  display: block;
  font-weight: bold;
  margin-bottom: 0.5em;
}

/*---------------------------------------*/
comment-title {
  color: #b36b00;
}

hands-on-title {
  color: #2c3e99;
}

warning-title {
  color: #cc0000;
}

reference-title {
  color: #333333;
}

lecture-title {
  color: #5a2a83;
}


/*---------------------------------------*/

hands-on-title::before {
  content: "🛠️ Hands-on: ";
  margin-right: 0.3em;
}

comment-title::before {
  content: "💡 Comment: ";
  margin-right: 0.3em;
}

warning-title::before {
  content: "⚡  Warning: ";
  margin-right: 0.3em;
}

reference-title::before {
  content: "📖  ";
  margin-right: 0.3em;
}

lecture-title::before {
  content: "🎓 Lecture: ";
  margin-right: 0.3em;
}

/*---------------------------------------*/

.comment {
  background: #ffecc1; 
  padding: 1em;
  margin: 1em 0;
  border-left: 5px solid #e6b800; 
  border-radius: 5px;
}


.hands-on {
  background: #dfe5f9; 
  padding: 1em;
  margin: 1em 0;
  border-left: 5px solid #2c3e99; 
  border-radius: 5px;
}

.warning {
  background: #ffe5e5; 
  padding: 1em;
  margin: 1em 0;
  border-left: 5px solid #cc0000; 
  border-radius: 5px;
}

.reference {
  background: #f0f0f0; 
  padding: 1em;
  margin: 1em 0;
  border-left: 5px solid #333333; 
  border-radius: 5px;
}

.lecture {
  background: #f4e9f9;
  padding: 1em;
  margin: 1em 0;
  border-left: 5px solid #5a2a83;
  border-radius: 5px;
}
/*---------------------------------------*/

.flag {
  border: 1px solid #ccc;   /* dünner grauer Rand */
  border-radius: 3px;       /* leicht abgerundet, kein Kreis */
  background-color: white;  /* Weiß als Hintergrund, damit die JP-Flagge klar wirkt */
  padding: 1px;             /* kleiner Abstand zum Rand */
}

/*---------------------------------------*/

code.tool {
  display: inline-block;
  background: #000 !important;
  color: #fff !important;
  font-weight: 700;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1;
}
code.tool::before {
  content: "🔧 ";
}